Angular - 구성 요소에서 module.id 의 의미는 무엇입니까?

Angular - 구성 요소에서 module.id 의 의미는 무엇입니까?

Angular 앱에서 저는 그것을 보았습니다.@Component이 재이있습다입니다.moduleId은 무슨뜻입니까?그것은 무엇을 뜻하나요?

그리고 언제module.id어디에도 정의되어 있지 않으며, 앱은 여전히 작동합니다.어떻게 아직도 작동합니까?

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

Angular의 베타 릴리스(버전 2-alpha.51 이후)는 templateUrl 및 styleUrls와 같은 구성 요소에 대한 상대적 자산을 지원합니다.@Component장식가

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

@Component decorator에서 moduleId: module.id 를 설정하는 것이 여기서 핵심입니다.만약 당신이 그것을 가지고 있지 않다면 Angular 2는 당신의 파일들을 찾을 것입니다.

@Praedeep Jain 덕분에 저스틴 슈워첸버거의 게시물 출처.

2016년 9월 16일 업데이트:

번들링을 위해 웹 팩을 사용하는 경우에는 필요하지 않습니다.module.id it) 웹팩 플러그인 자동핸들 (add it)은 웹팩 플러그인의 자동핸들 (add it)입니다.module.id 묶음으로

(2017-03-13)에 대한 업데이트:

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

새 시스템을 추가했습니다.권장 시스템에 대한 JS 플러그인(systemjs-angular-loader.js)JS 구성.이 플러그인은 templateUrl 및 styleUrls의 "구성 요소 관련" 경로를 "절대 경로"로 동적으로 변환합니다.

구성 요소 관련 경로만 작성하는 것이 좋습니다.그것이 이 문서들에서 논의된 유일한 형태의 URL입니다.은 더 더이쓸필없다니습가를 쓸 .@Component({ moduleId: module.id })너도 마찬가지야.

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

정의:

moduleId?: string

moduleId 개변수 안에 있는 @Component은 석이필니다합을 사용합니다.string 즉값,,

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

일반적인 JS 사용: module.id,

시스템 JS 사용: __moduleName

---

를 사용하는 moduleId:

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

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

ref(old): 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
   ...
})

행운을 빌어요

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

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

다음은 해당 페이지의 관련 텍스트입니다.

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

했습니다. 플러그인JS 플러그인)systemjs-angular-loader.js)에서하는 시스템으로 이동합니다.JS. 이 및 의 " 관련"" 경로합니다.이 플러그인은 templateUrl 및 styleUrls의 "구성 요소 관련" 경로를 "절대 경로"로 동적으로 변환합니다.

구성 요소 관련 경로만 작성하는 것이 좋습니다.그것이 이 문서들에서 논의된 유일한 형태의 URL입니다.은 더 더이쓸필없다니습가를 쓸 .@Component({ moduleId: module.id })너도 마찬가지야.

훌륭한 설명 외에도.echonax그리고.Nishchit Dhanani덧붙이고 싶은 것은, 저는 구성 요소의 개체 수를 정말 싫어한다는 것입니다.module.id특히, (사전) AoT 컴파일을 지원하고 현실적인 프로젝트를 위해 이것이 당신이 목표로 해야 할 것이라면, 그런 것을 위한 장소는 없습니다.module.id구성 요소 메타데이터에 있습니다.

문서에서:

를하는사된일응프용램로를 하는 JiT SystemJS 및 관련 " " " " " " " " " " " " " " " " " 을 설정해야 합니다.@Component.moduleId의 module.idAoT 컴파일된 앱이 실행될 때 모듈 개체가 정의되지 않습니다.다음과 같이 index.html에 글로벌 모듈 값을 할당하지 않으면 앱이 실패하고 null 참조 오류가 발생합니다.

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

저는 이 라인이 생산 버전에 있다고 생각합니다.index.html파일이 절대 허용되지 않습니다!

개발을 ( JiT 및 구성 요소 정의로 갖는 것이 moduleId: module.idslink)

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

,▁like싶다습▁styles니▁at고와 같은 스타일을 배치하고 싶습니다.my.component.css 파일: 템릿파일, 예들어)my.component.html 구성 요소에 상대적인my.component.ts파일 경로

이 모든 것을 달성하기 위해 제가 사용하는 솔루션은 여러 디렉터리 소스에서 개발 단계 중에 웹 서버(Lite-server 또는 브라우저-sync)를 호스팅하는 것입니다!

bs-config.json:

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

자세한 내용은 이 답변을 참고하시기 바랍니다.

이 접근 방식에 의존하는 모범적인 Angular 2 빠른 시작 프로젝트가 여기에서 호스팅됩니다.

만약 당신이 tsconfig.json에서 "es6"를 사용한다면, 당신은 이것을 사용할 필요가 없는 것처럼 보입니다 :)

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

추가하기moduleId: module.id에서는 기본 제공 프로그램 및 각진 웹 애플리케이션을 구축할 때 발생할 수 있는 몇 가지 문제를 해결합니다.그것을 사용하는 것이 가장 좋은 방법입니다.

또한 구성요소가 상단 폴더가 아닌 현재 디렉토리에서 파일을 검색할 수 있습니다.

언급URL : https://stackoverflow.com/questions/37178192/angular-what-is-the-meanings-of-module-id-in-component