角的概念

imports makes the exported declarations of other modules available in the current module declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported. providers are to make services and values known to DI (dependency injection). They are added to the root scope and they are injected to other services or directives that have them as dependency.

提供商的一个特殊情况是惰性加载模块，这些模块获得自己的子注入器。默认情况下，惰性加载模块的提供者只提供给这个惰性加载模块(不像其他模块那样提供给整个应用程序)。

有关模块的更多详细信息，请参见https://angular.io/docs/ts/latest/guide/ngmodule.html

导出使组件、指令和管道可以在将该模块添加到导入的模块中使用。导出也可以用来重新导出模块，如CommonModule和FormsModule，这通常是在共享模块中完成的。 entryComponents为离线编译注册组件，以便它们可以与ViewContainerRef.createComponent()一起使用。路由器配置中使用的组件是隐式添加的。

TypeScript (ES2015)导入

进口…from 'foo/bar'(可能解析为index.ts)用于TypeScript导入。当你在一个typescript文件中使用一个在另一个typescript文件中声明的标识符时，你就需要这些标识符。

Angular的@NgModule()导入和TypeScript的导入是完全不同的概念。

参见jDriven - TypeScript和ES6导入语法

它们中的大多数实际上是TypeScript也使用的普通ECMAScript 2015 (ES6)模块语法。

import用于导入支持模块，如FormsModule、RouterModule、CommonModule或任何其他定制的特性模块。

declarations are used to declare components, directives, pipes that belong to the current module. Everyone inside declarations knows each other. For example, if we have a component, say UsernameComponent, which displays a list of the usernames and we also have a pipe, say toupperPipe, which transforms a string to an uppercase letter string. Now If we want to show usernames in uppercase letters in our UsernameComponent then we can use the toupperPipe which we had created before but the question is how UsernameComponent knows that the toupperPipe exists and how it can access and use that. Here come the declarations, we can declare UsernameComponent and toupperPipe.

提供程序用于在模块中注入组件、指令和管道所需的服务。

组件被声明，模块被导入，服务被提供。我正在使用的一个例子:

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 { }

Angular @NgModule的构造:

import { x } from 'y';: This is standard typescript syntax (ES2015/ES6 module syntax) for importing code from other files. This is not Angular specific. Also this is technically not part of the module, it is just necessary to get the needed code within scope of this file. imports: [FormsModule]: You import other modules in here. For example we import FormsModule in the example below. Now we can use the functionality which the FormsModule has to offer throughout this module. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: You put your components, directives, and pipes here. Once declared here you now can use them throughout the whole module. For example we can now use the OnlineHeaderComponent in the AppComponent view (html file). Angular knows where to find this OnlineHeaderComponent because it is declared in the @NgModule. providers: [RegisterService]: Here our services of this specific module are defined. You can use the services in your components by injecting with dependency injection.

示例模块:

// 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后有所帮助:

---

声明

例子:

声明(AppComponent):

我们可以在这里注入什么?组件，管道，指令

---

进口

例子:

import: [BrowserModule, AppRoutingModule]

我们可以在这里注入什么?其他模块

---

供应商

例子:

供应商(UserService):

我们可以在这里注入什么?服务

---

引导

例子:

引导(AppComponent):

我们可以在这里注入什么?此模块将生成的主组件(组件树的顶部父节点)

---

输入组件

例子:

entryComponents (PopupComponent):

我们可以在这里注入什么?动态生成的组件(例如通过使用ViewContainerRef.createComponent())

---

出口

例子:

export: [TextDirective, PopupComponent, BrowserModule]

我们可以在这里注入什么?我们希望在另一个模块中访问的组件、指令、模块或管道(在导入该模块后)

declarations: This property tells about the Components, Directives and Pipes that belong to this module. exports: The subset of declarations that should be visible and usable in the component templates of other NgModules. imports: Other modules whose exported classes are needed by component templates declared in this NgModule. providers: Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.) bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.