Angular 2
モジュール

前書き

簡単なモジュール

モジュールは@NgModuleデコレータを持つクラスです。モジュールを作成するために、いくつかのパラメータを渡す@NgModuleを追加します：

• bootstrap ：アプリケーションのルートとなるコンポーネント。この設定はルートモジュール上にのみ存在します
• declarations ：モジュールが宣言するリソース。新しいコンポーネントを追加するときは、宣言を更新する必要があります（ ng generate componentは自動的にそれを行います）
• exports ：モジュールが他のモジュールで使用できるようにエクスポートするリソース
• imports ：モジュールが他のモジュールから使用するリソース（モジュールクラスのみが受け入れられます）
• providers ：コンポーネントに注入できるリソース（di）

簡単な例：

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
@NgModule({
  bootstrap: [AppComponent]
  declarations: [AppComponent],
  exports: [],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule { }

ネスティングモジュール

モジュールは@NgModuleデコレータのimportsパラメータを使って入れ子にすることができます。

アプリケーションでは、 ReservePipe （文字列を逆にするパイプ）などの汎用core.moduleを含むcore.moduleを作成し、それらをこのモジュールにバンドルすることができます。

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [ReversePipe], // export things to be imported in another module
  declarations: [ReversePipe],
})
export class CoreModule { }

次に、 app.module ：

import { CoreModule } from 'app/core/core.module';

@NgModule({
  declarations: [...], // ReversePipe is available without declaring here
                       // because CoreModule exports it
  imports: [
    CoreModule,        // import things from CoreModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }