(2017-03-13) 업데이트 :

moduleId에 대한 모든 언급이 제거되었습니다. “구성 요소 상대 경로”요리 책이 삭제되었습니다.

권장 SystemJS 구성에 새로운 SystemJS 플러그인 (systemjs-angular-loader.js)을 추가했습니다. 이 플러그인은 templateUrl 및 styleUrls의 “component-relative”경로를 “absolute paths”로 동적으로 변환합니다.

구성 요소 관련 경로 만 작성하는 것이 좋습니다. 이것이이 문서에서 논의 된 유일한 형식의 URL입니다. 더 이상 글을 쓸 필요 @Component({ moduleId: module.id })도없고해서는 안됩니다.

출처 : https://angular.io/docs/ts/latest/guide/change-log.html

정의:

moduleId?: string

moduleId@Component주석 내부의 매개 변수 는 다음과 같은 string값을 갖습니다.

” 구성 요소를 포함하는 모듈의 모듈 ID입니다. “

CommonJS 사용법 : module.id,

SystemJS 사용법 : __moduleName

사용 이유moduleId :

moduleId 설명서에 나와있는대로 스타일 시트 및 템플릿의 상대 경로를 확인하는 데 사용됩니다.

구성 요소를 포함하는 모듈의 모듈 ID입니다. 템플릿 및 스타일의 상대 URL을 확인할 수 있어야합니다. Dart에서는이를 자동으로 결정할 수 있으며 설정할 필요가 없습니다. CommonJS에서는 항상 module.id로 설정할 수 있습니다.

심판 (구) : https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

@Component 메타 데이터의 moduleId 속성을 설정하여 컴포넌트 클래스 파일을 기준으로 템플릿 및 스타일 파일의 위치를 ​​지정할 수 있습니다.

심판 : https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

사용법 예 :

폴더 구조 :

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html

module.id없이 :

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

module.id 사용 :

tsconfig.json :

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

답변

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

<script>window.module = 'aot';</script>

@Component({
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

{
  "port": 8000,
  "server": ["app", "."]
}