Angularモジュールの構造

Angularでは、NgModulesと呼ばれるモジュールを取得して、アプリまたはアプリ内の機能を結合するユニットとして機能します。 すべてのAngularアプリには、アプリ全体を統合するための1つのルートモジュールであるappモジュールがあります。 また、アプリの個々の機能を独自のモジュールに分解することもベストプラクティスです。 この方法により、遅延読み込みや事前読み込みなどの特定の機能が有効になります。

必要最低限のNgModuleは次のようになります。

// ...ES6 module imports

@NgModule({
  declarations: [ ... ],
  imports: [ ... ],
  providers: [ ... ],
  bootstrap: [ ... ],
  entryComponents: [ ... ],
  exports: [ ... ]
})
export class MyModule { }

そして、実際のメンバーでどのように見えるかの例を次に示します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { VideoPlayerComponent } from './video-player/video-player.component';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
import { VideoService } from './services/video.service';

それを分解する

@NgModuleデコレータの各エントリについて簡単に説明します。

宣言

これは、モジュールの一部である必要があるコンポーネント、パイプおよびディレクティブを指定するためのものです。

輸入

これは、NgModuleの一部であるコンポーネントのテンプレートで使用されるメンバーをエクスポートした他のモジュールをインポートするためのものです。 たとえば、BrowserModuleはCommonModuleを再エクスポートします。これにより、組み込みのNgIfおよびNgForディレクティブが使用可能になります。

RouterModule 、 BrowserModule 、 FormsModule 、 HttpModule 、および BrowserAnimationsModule は、一般的にインポートされるモジュールの例です。

輸出

モジュールのメンバーをエクスポートして、他のモジュールのコンポーネントテンプレートで使用できるようにする場合、これらのメンバーはexports配列に配置されます。

たとえば、 CommonModule の場合、 COMMON_DIRECTIVES と COMMON_PIPES エクスポートされます。これは、BrowserModuleまたはCommonModuleを独自のNgModuleにインポートしたときにコンポーネントテンプレートで使用できるようになります。

ブートストラップ

これは、ルートコンポーネントを定義するためのもので、多くの場合AppComponentと呼ばれます。 これは、 bootstrap に含まれるメンバーは1つだけであり、メインのアプリモジュールでのみ定義される必要があることを意味します。

プロバイダー

これは注射剤が行くところです。 サービス、ルートガード、 httpインターセプターなどは、プロバイダーアレイの一部である必要がある注射剤の例です。 提供されると、アプリ内のどこでも利用できるようになります。 これが、ルートアプリモジュールでサービスが提供されることが多い理由です。

entryComponents

これは、コンポーネントテンプレートのどこにも参照されていないため、コンパイル時にAngularコンパイラで検出できないコンポーネント用です。 ルーティングされたコンポーネントがテンプレートでまったく参照されないのは一般的ですが、Angularはそれらを entryComponents に自動的に追加するので、自分で追加する必要はありません。

entryComponentsに入る必要のあるコンポーネントはそれほど一般的ではありません。 良い例は、 Angular Materialダイアログです。これは、動的に作成され、Angularコンパイラーがそれ以外の方法でそれらを認識しないためです。