web-dev-qa-db-ja.com

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]
});
angularsystemjsangular2-components
207
Nishchit Dhanani

Angularのベータリリース（バージョン2-alpha.51以降）は、@Componentデコレータの templateUrl および styleUrls のように、コンポーネントの相対アセットをサポートします。

module.idはCommonJSを使うときに機能します。あなたはそれがどのように機能するかについて心配する必要はありません。

覚えておいてください ：@ moduleデコレータのmoduleId：module.idを設定することがここでの鍵です。それがない場合、Angular 2はあなたのファイルをルートレベルで探します。

Justin Schwartzenbergerの投稿 からの投稿、 @Pradeep Jain のおかげで

2016年9月16日に更新：

webpack をバンドルに使用している場合は、デコレータにmodule.idは必要ありません。 Webpackプラグインの自動処理（追加）最終バンドルのmodule.id

169
Nishchit Dhanani

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キーワードがTypeScriptファイルで自動的に使用可能になります。

npm install -D @types/node

あなたの設定次第で、 tooling を得るために might を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
   ...
})

がんばろう

20
Akash

echonaxとNishchit Dhananiのすばらしい説明に加えて、module.idを使用したコンポーネントの実装が本当に嫌いだということを付け加えます。特に、（Ahead-of-Time） AoT-compilation のサポートがあり、現実的なプロジェクトの場合、これが目指すべきものである場合、コンポーネントメタデータにmodule.idのような場所はありません。

Docs から：

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.htmlrelativeのようなテンプレートファイルをコンポーネントmy.component.tsファイルパスに配置したいと思います。

これをすべて達成するために、私が使用しているソリューションは、開発段階で複数のディレクトリソースからWebサーバー（lite-serverまたはbrowser-sync）をホストすることです！

bs-config.json：

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

これをお試しください answer 詳細をご覧ください。

このアプローチに依存する模範的なangular 2クイックスタートプロジェクトは、ホストされています here 。

3
Evgeny Bobkin

Angular docに従って、@ Component（{moduleId：module.id}）は使用しないでください

参照してください： https://angular.io/docs/ts/latest/guide/change-log.html

そのページの関連テキストは次のとおりです。

moduleIdに関する言及がすべて削除されました。 "コンポーネントの相対パス"クックブックが削除されました（2017-03-13）

SystemJSの推奨設定に新しいSystemJSプラグイン（systemjs-angular-loader.js）を追加しました。このプラグインはtemplateUrlとstyleUrlsの "component-relative"パスを動的に "絶対パス"に変換します。

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

3
Prasanth Bendra

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

1
Steffan

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

0
kg11