Angular 앱에서 @Component속성 이있는 것을 보았습니다 moduleId. 무슨 뜻인가요?

그리고 module.id가 정의되지 않은 경우 에도 앱은 여전히 ​​작동합니다. 여전히 어떻게 작동합니까?

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

각도의 베타 버전은 (vesion 2 alpha.51 이후) 상대와 같은 구성 요소에 대한 자산, 지원 templateUrl 및 styleUrls을 에 @Component장식.

module.idCommonJS를 사용할 때 작동합니다. 작동 방식에 대해 걱정할 필요가 없습니다.

기억하십시오 : @Component 데코레이터에서 moduleId : module.id를 설정하는 것이 핵심입니다. 그것을 가지고 있지 않으면 Angular 2는 루트 레벨에서 파일을 찾습니다.

@Pradeep Jain 덕분에 Justin Schwartzenberger의 게시물 출처

2016 년 9 월 16 일 업데이트 :

번들로 웹팩 을 사용하는 경우 module.id데코레이터 가 필요하지 않습니다 . module.id최종 번들에서 Webpack 플러그인 자동 처리 (추가)

(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 설명서에 나와있는대로 스타일 시트 및 템플릿의 상대 경로를 확인하는 데 사용됩니다.

구성 요소를 포함하는 모듈의 모듈 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
})

당신이 얻는다면 typescript error, declare파일의 변수 만 .

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

UPDATE - December 08, 2016

module키워드는 볼 수 있습니다 node. 따라서 @types/node프로젝트에 를 설치 하면 module키워드를 입력하지 않아도 자동으로 타이프 스크립트 파일에서 사용할 수 있습니다 declare.

npm install -D @types/node

구성에 따라 툴링 을 얻으 려면 파일에 이것을 포함시켜야 할 수도 있습니다 .tsconfig.json

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

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

행운을 빕니다

에서 큰 설명에 추가 echonax하고 Nishchit Dhanani내가 정말와 구성 요소의 인구를 싫어, 추가 할 module.id. 특히 (Ahead-of-Time) AoT 컴파일 을 지원하고 현실적인 프로젝트를 목표로해야하는 경우 module.id구성 요소 메타 데이터 와 같은 곳이 없습니다 .

로부터 문서 :

SystemJS로더 및 컴포넌트 기준 URL 을 사용하는 JiT 컴파일 애플리케이션 은 @Component.moduleId특성을로 설정해야합니다 module.id. AoT 컴파일 앱이 실행될 때 모듈 객체가 정의되지 않습니다. index.html에 다음과 같이 전역 모듈 값을 할당하지 않으면 앱이 null 참조 오류와 함께 실패합니다.

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

index.html파일 의 프로덕션 버전 에서이 줄을 갖는 것은 절대 허용되지 않습니다!

따라서, 목표는있을 것입니다 (적시) 다음과 같은 구성 요소 메타 데이터 정의와 생산을위한 개발 및 AOT 지원을위한 JIT 컴파일 : (없는 moduleId: module.id라인)

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

동시에 구성 요소 파일 경로 my.component.css와 my.component.html 관련된 스타일 및 템플릿 파일 을 배치하고 싶습니다 my.component.ts.

이 모든 것을 달성하기 위해 사용중인 솔루션은 여러 디렉토리 소스에서 개발 단계 동안 웹 서버 (lite-server 또는 browser-sync)를 호스팅하는 것입니다!

bs-config.json:

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

자세한 내용 은이 답변 을 참조하십시오.

이 접근법에 의존하는 예시적인 앵귤러 2 퀵 스타트 프로젝트가 여기 에 호스팅 됩니다 .

Angular 문서에 따라 @Component ({moduleId : module.id})를 사용하면 안됩니다

참조하십시오 : https://angular.io/docs/ts/latest/guide/change-log.html

해당 페이지의 관련 텍스트는 다음과 같습니다.

moduleId에 대한 모든 언급이 제거되었습니다. "구성 요소 상대 경로"요리 책 삭제 (2017-03-13)

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

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

tsconfig.json에서 "module": "es6"을 사용하는 경우 다음과 같이 사용하지 않아도됩니다.

이 moduleId 값은 Angular reflection 프로세스와 metadata_resolver 구성 요소에서 구성 요소를 구성하기 전에 정규화 된 구성 요소 경로를 평가하는 데 사용됩니다.

추가하면 moduleId: module.id기본 각도 앱 및 각도 웹 앱을 빌드 할 때 발생할 수있는 몇 가지 문제가 수정되었습니다. 사용하는 것이 가장 좋습니다.

또한 구성 요소가 최상위 폴더 대신 현재 디렉토리에서 파일을 찾을 수 있도록합니다.