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.

添加一个快速备考表，可能会在长时间使用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.

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

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

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.

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