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を使用するときに機能します。それがどのように機能するかについて心配する必要はありません。

覚えておいてください：モジュールIDの設定：@Componentデコレータでmodule.idはここで重要です。それがない場合、Angular 2はルートレベルでファイルを探します。

ソースジャスティンSchwartzenbergerのポスト、おかげ@Pradeepジャイナ

2016年9月16日の更新：

バンドリングにwebpackを使用している場合はmodule.id、デコレータは必要ありません 。WebPACKのプラグイン自動車のハンドル（それを追加） module.id、最終的なバンドル内

（2017-03-13）の更新：

moduleIdに関するすべての言及が削除されました。「コンポーネントの相対パス」クックブックが削除されました

推奨されるSystemJS構成に新しいSystemJSプラグイン（systemjs-angular-loader.js）を追加しました。このプラグインは、templateUrlおよびstyleUrlsの「コンポーネント相対」パスを「絶対パス」に動的に変換します。

コンポーネント相対パスのみを記述することを強くお勧めします。これは、これらのドキュメントで説明されている唯一の形式の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に設定できます。

ref（old）：https : //angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

@ComponentメタデータのmoduleIdプロパティを設定するだけで、コンポーネントクラスファイルに関連するテンプレートとスタイルファイルの場所を指定できます

ref：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必要のないtypescriptファイルでキーワードが自動的に使用可能になります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ファイルの本番バージョンにこの行を含めることは絶対に許されないと思います！

したがって、目標は、次のコンポーネントメタデータ定義を使用して、開発用の（ジャストインタイム）JiTコンパイルとプロダクション用のAoTサポートを持つことです（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

これらすべてを実現するために、私が使用しているソリューションは、開発フェーズ中に複数のディレクトリソースからWebサーバー（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プラグイン（systemjs-angular-loader.js）を推奨のSystemJS構成に追加しました。このプラグインは、templateUrlおよびstyleUrlsの「コンポーネント相対」パスを「絶対パス」に動的に変換します。

コンポーネント相対パスのみを記述することを強くお勧めします。これは、これらのドキュメントで説明されている唯一の形式のURLです。あなたはもう書く必要はありませんし、そうする必要@Component({ moduleId: module.id })もありません。

tsconfig.jsonで "module"： "es6"を使用している場合、これを使用する必要はありません:)

このmoduleId値は、コンポーネントが構築される前に完全修飾コンポーネントパスを評価するために、Angularリフレクションプロセスとmetadata_resolverコンポーネントによって使用されます。

moduleId: module.idネイティブアングルアプリとアングルウェブアプリを構築するときに発生する可能性があるいくつかの問題を修正して追加します。それを使用することをお勧めします。

また、コンポーネントは、トップフォルダーからではなく、現在のディレクトリでファイルを検索できます。