前段

NgModuleは、アプリケーションの各部位がどのように協調するかを記述しています。全てのアプリケーションには、常に最低ひとつのrootモジュールがあります。rootモジュールがアプリケーションを起動するブートストラップです。慣例により、これをAppModuleと名付けます。

Angular CLIを使ってアプリケーションを新規作成すると、デフォルトでは下記のようなファイルができあがります。¹

app.module.ts

/*
JavaScriptモジュールをインポートしています。
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

/*
@NgModule修飾子がついたAppModuleクラスです。
*/
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

JavaScriptのインポートに続いて、@NgModuleがついたAppModuleクラスがあります。

@NgModule修飾子の存在が、クラスをNgModuleとして認識させます。@NgModule内のメタデータが、アプリケーションがどのようにコンパイルして起動されるかを示します。

declarations — このアプリケーションのたったひとつのコンポーネントです。
imports — BrowserModuleをインポートしています。BrowserModuleは、DOMレンダリング、サニタイズ、locationといったブラウザに特化したサービスを持ちます。
providers — サービスプロバイダです。
bootstrap — Angularが生成するrootコンポーネントです。index.htmlウェブページに挿入されます。

CLIによって自動生成されたコンポーネントが、declarationsとbootstrapに列挙されています。

`declarations`配列

declarations配列は、Angularにモジュールの支配下にあるコンポーネントがなんであるかを教えます。新しいコンポーネントを作成したら、declarationsに追加しないといけません。

declarationsに記述せずにコンポーネントを使おうとすると、エラーメッセージが出力されます。

declarations配列には、宣言可能なクラスのみを列挙できます。宣言可能なクラスとは、コンポーネント、ディレクティブ、パイプです。宣言可能なクラスが属することができるのは、一つのモジュールだけです。ひとつの宣言可能なクラスを異なるモジュールに追加するとエラーとなります。

宣言可能なクラスは、そのモジュール内からのみ見えます。他のモジュールからは見えません。他のモジュールから見えるようにするには、そのモジュールからエクスポートし、他のモジュールでインポートします。

@NgModuleでディレクティブを使う

ディレクティブ、コンポーネント、パイプを使うには、いくつかやることがあります。

それを書いたファイルからエクスポートする。
適切なモジュールファイルでインポートする。
@NgModuleのdeclarationsに追加する。

順番に見ていきます。

クラスをエクスポート

@Directiveを付けたクラスファイルを作成し、エクスポートします。

src/app/item.directive.ts

import { Directive } from '@angular/core';

@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }

}

クラスをインポート

NgModuleがあるファイルにインポートします。

src/app/app.module.ts

import { ItemDirective } from './item.directive.ts'

`declarations`に追加

@NgModule修飾子のdeclarations配列に追加します。

src/app/app.module.ts

  declarations: [
    AppComponent,
    ItemDirective
  ],

`imports`配列

このモジュール内のコンポーネントから参照されるコンポーネント、ディレクティブ、パイプをエクスポートしているモジュールを列挙します。今回のケースでは、AppComponentがBrowserModuleのコンポーネント、ディレクティブ、パイプを参照しています。

`provider`配列

アプリケーションが必要とするサービスを列挙します。ここで列挙されたサービスは、アプリケーション全体から使うことができます。詳しくはProvidersへ。

`bootstrap`配列

アプリケーションはroot AppModuleをブートストラップして起動します。ブートストラッププロセスはbootstrap配列に列挙されたコンポーネントを作成し、ブラウザのDOMに挿入します。

各ブートストラップコンポーネントは、そのコンポーネント自身が持つコンポーネントツリーの根元となります。

複数のコンポーネントツリーを配置することもできますが、ほとんどのアプリケーションはただひとつのコンポーネントツリーしか持たず、単一のコンポーネントをブートストラップします。

Angular CLI 6.0.6で生成 ↩