NgModuleでの宣言、プロバイダー、インポートの違いは何ですか？

私は（時々 Angular2 +と呼ばれる）角度を理解しようとしています、そして、私が出会いました@Module：

1. 輸入

2. 宣言

3. プロバイダー

Angularクイックスタートに従う

角度の概念

• imports 他のモジュールのエクスポートされた宣言を現在のモジュールで使用できるようにします
• declarations現在のモジュールからのディレクティブ（コンポーネントとパイプを含む）を現在のモジュール内の他のディレクティブで使用できるようにすることです。ディレクティブ、コンポーネント、またはパイプのセレクターは、宣言またはインポートされた場合にのみHTMLと照合されます。
• providersサービスと値をDI（依存性注入）に認識させることです。これらはルートスコープに追加され、依存関係を持つ他のサービスまたはディレクティブに挿入されます。

の特別なケースはproviders、独自の子インジェクターを取得する遅延ロードされたモジュールです。providers遅延ロードされたモジュールは、デフォルトでこの遅延ロードされたモジュールにのみ提供されます（他のモジュールのようにアプリケーション全体ではありません）。

モジュールの詳細については、https：//angular.io/docs/ts/latest/guide/ngmodule.htmlも参照してください。

• exportsこのモジュールをに追加するモジュールでコンポーネント、ディレクティブ、パイプを使用できるようにしますimports。 exportsCommonModuleやFormsModuleなどのモジュールを再エクスポートするためにも使用できます。これは、共有モジュールでよく行われます。

• entryComponentsコンポーネントをオフラインコンパイル用に登録して、で使用できるようにしViewContainerRef.createComponent()ます。ルーター構成で使用されるコンポーネントは暗黙的に追加されます。

TypeScript（ES2015）インポート

import ... from 'foo/bar'（これはに解決される場合がありますindex.ts）はTypeScriptインポート用です。別のtypescriptファイルで宣言されているtypescriptファイルで識別子を使用するときはいつでもこれらが必要です。

Angular @NgModule() importsとTypeScript importはまったく異なる概念です。

jDriven-TypeScriptおよびES6インポート構文も参照してください。

それらのほとんどは、TypeScriptが使用するプレーンECMAScript 2015（ES6）モジュール構文です。

imports FormsModule、RouterModule、CommonModule、またはその他のカスタムメイドの機能モジュールなどのサポートモジュールをインポートするために使用されます。

declarations現在のモジュールに属するコンポーネント、ディレクティブ、パイプを宣言するために使用されます。宣言の中の誰もがお互いを知っています。たとえば、ユーザー名のリストを表示するコンポーネント（UsernameComponentなど）があり、文字列を大文字の文字列に変換するtoupperPipeなどのパイプもあるとします。ここで、UsernameComponentでユーザー名を大文字で表示したい場合は、前に作成したtoupperPipeを使用できますが、問題は、UsernameComponentがtoupperPipeが存在することをどのように認識し、それをどのようにアクセスして使用できるかを知ることです。宣言が来たら、UsernameComponentとtoupperPipeを宣言できます。

Providers モジュール内のコンポーネント、ディレクティブ、パイプに必要なサービスを注入するために使用されます。

コンポーネントが宣言され、モジュールがインポートされ、サービスが提供されます。私が作業している例：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

角度@NgModule構造：

1. import { x } from 'y';：これはES2015/ES6、他のファイルからコードをインポートするための標準のtypescript構文（モジュール構文）です。これはAngular固有ではありません。また、これは技術的にはモジュールの一部ではなく、必要なコードをこのファイルのスコープ内で取得する必要があるだけです。
2. imports: [FormsModule]：他のモジュールをここにインポートします。たとえばFormsModule、以下の例でインポートします。これで、このモジュール全体でFormsModuleが提供する機能を使用できます。
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]：コンポーネント、ディレクティブ、パイプをここに配置します。ここで宣言したら、モジュール全体で使用できます。たとえばOnlineHeaderComponent、AppComponentビュー（htmlファイル）でを使用できます。OnlineHeaderComponentこれはで宣言されているため、Angularはこれを見つける場所を知っています@NgModule。
4. providers: [RegisterService]：ここでは、この特定のモジュールのサービスが定義されています。依存性注入で注入することにより、コンポーネントでサービスを使用できます。

モジュールの例：

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angularでの長い休憩後に役立つチートシートを追加する：

宣言

例：

declarations: [AppComponent]

ここで何を注入できますか？コンポーネント、パイプ、ディレクティブ

輸入

例：

imports: [BrowserModule, AppRoutingModule]

ここで何を注入できますか？他のモジュール

プロバイダー

例：

providers: [UserService]

ここで何を注入できますか？サービス

ブートストラップ

例：

bootstrap: [AppComponent]

ここで何を注入できますか？このモジュールによって生成されるメインコンポーネント（コンポーネントツリーの最上位の親ノード）

エントリーコンポーネント

例：

entryComponents: [PopupComponent]

ここで何を注入できますか？動的に生成されたコンポーネント（たとえば、ViewContainerRef.createComponent（）を使用して）

書き出す

例：

export: [TextDirective, PopupComponent, BrowserModule]

ここで何を注入できますか？ （このモジュールをインポートした後）別のモジュールでそれらにアクセスしたいコンポーネント、ディレクティブ、モジュール、またはパイプ

1. 宣言：このプロパティは、このモジュールに属するコンポーネント、ディレクティブ、およびパイプについて通知します。
2. exports：他のNgModuleのコンポーネントテンプレートで表示および使用できる宣言のサブセット。
3. imports：エクスポートされたクラスがこのNgModuleで宣言されたコンポーネントテンプレートに必要な他のモジュール。
4. プロバイダー：このNgModuleがサービスのグローバルコレクションに貢献するサービスの作成者。アプリのすべての部分でアクセス可能になります。（コンポーネントレベルでプロバイダーを指定することもできます。
5. ブートストラップ：ルートコンポーネントと呼ばれるメインアプリケーションビュー。他のすべてのアプリビューをホストします。ルートNgModuleのみがブートストラッププロパティを設定する必要があります。