NgModule中的声明，提供程序和导入有什么区别？

本文翻译自：What is the difference between declarations, providers, and import in NgModule?

I am trying to understand Angular (sometimes called Angular2+), then I came across @Module : 我试图理解Angular（有时称为Angular2 +），然后我遇到了@Module ：

1. Imports 进口

2. Declarations 声明

3. Providers 供应商

Following Angular Quick Start 遵循Angular快速入门

---

#1楼

参考：https://stackoom.com/question/2du3G/NgModule中的声明-提供程序和导入有什么区别

---

#2楼

Angular Concepts 角度概念

• imports makes the exported declarations of other modules available in the current module imports使得当前模块中的其他模块的导出声明可用
• declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. declarations是使当前模块中的指令（包括组件和管道）可用于当前模块中的其他指令。 Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported. 指令，组件或管道的选择器仅在声明或导入时才与HTML匹配。
• providers are to make services and values known to DI (dependency injection). providers要使DI（依赖注入）知道服务和值。 They are added to the root scope and they are injected to other services or directives that have them as dependency. 它们被添加到根作用域中，并将它们注入到将它们作为依赖项的其他服务或指令中。

A special case for providers are lazy loaded modules that get their own child injector. providers一个特例是延迟加载的模块，它们可以获得自己的子注入器。 providers of a lazy loaded module are only provided to this lazy loaded module by default (not the whole application as it is with other modules). providers延迟加载模块的仅提供给默认此延迟加载模块（未整个应用程序，因为它与其他模块）。

For more details about modules see also https://angular.io/docs/ts/latest/guide/ngmodule.html 有关模块的更多详细信息，请参阅https://angular.io/docs/ts/latest/guide/ngmodule.html

• exports makes the components, directives, and pipes available in modules that add this module to imports . exports使组件，指令和管道可用于将此模块添加到imports模块中。 exports can also be used to re-export modules such as CommonModule and FormsModule, which is often done in shared modules. exports也可用于再出口模块，如CommonModule和FormsModule，其通常在共享模块进行。

• entryComponents registers components for offline compilation so that they can be used with ViewContainerRef.createComponent() . entryComponents注册用于脱机编译的组件，以便它们可以与ViewContainerRef.createComponent()一起使用。 Components used in router configurations are added implicitly. 路由器配置中使用的组件是隐式添加的。

TypeScript (ES2015) imports TypeScript（ES2015）导入

import ... from 'foo/bar' (which may resolve to an index.ts ) are for TypeScript imports. import ... from 'foo/bar' （ 可以解析为index.ts ）用于TypeScript导入。 You need these whenever you use an identifier in a typescript file that is declared in another typescript file. 只要在另一个打字稿文件中声明的打字稿文件中使用标识符，就需要这些。

Angular's @NgModule() imports and TypeScript import are entirely different concepts . Angular的@NgModule() imports和TypeScript import是完全不同的概念 。

See also jDriven - TypeScript and ES6 import syntax 另请参见jDriven - TypeScript和ES6导入语法

Most of them are actually plain ECMAScript 2015 (ES6) module syntax that TypeScript uses as well. 其中大多数实际上是TypeScript使用的简单的ECMAScript 2015（ES6）模块语法。

---

#3楼

imports : is used to import supporting modules likes FormsModule, RouterModule, CommonModule, or any other custom-made feature module. imports ：用于导入支持模块，如FormsModule，RouterModule，CommonModule或任何其他定制的功能模块。

declarations : is used to declare components, directives, pipes that belongs to the current module. declarations ：用于声明属于当前模块的组件，指令和管道。 Everything inside declarations knows each other. 声明中的所有内容都相互了解。 For example, if we have a component, say UsernameComponent, which display list of the usernames, and we also have a pipe, say toupperPipe, which transform string to uppercase letter string. 例如，如果我们有一个组件，比如UsernameComponent，它显示用户名列表，我们也有一个管道，比如toupperPipe，它将字符串转换为大写字母字符串。 Now If we want to show usernames in uppercase letters in our UsernameComponent, we can use the toupperPipe which we had created before but how UsernameComponent know that the toupperPipe exist and how we can access and use it, here comes the declarations, we can declare UsernameComponent and toupperPipe. 现在如果我们想在UsernameComponent中以大写字母显示用户名，我们可以使用之前创建的toupperPipe但是UsernameComponent如何知道toupperPipe存在以及我们如何访问和使用它，这里是声明，我们可以声明UsernameComponent和toupperPipe。

Providers : is used to inject the services required by components, directives, pipes in our module. Providers ：用于注入模块中组件，指令，管道所需的服务。

Read in detail here: https://angular.io/docs/ts/latest/guide/ngmodule.html 请在此处详细阅读： https ： //angular.io/docs/ts/latest/guide/ngmodule.html

---

#4楼

Components are declared, Modules are imported, and Services are provided. 声明组件，导入模块，并提供服务。 An example I'm working with: 我正在使用的一个例子：

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

---

#5楼

Angular @NgModule constructs: Angular @NgModule构造：

1. import { x } from 'y'; : This is standard typescript syntax ( ES2015/ES6 module syntax) for importing code from other files. ：这是用于从其他文件导入代码的标准ES2015/ES6语法（ ES2015/ES6模块语法）。 This is not Angular specific . 这不是Angular特有的 。 Also this is technically not part of the module, it is just necessary to get the needed code within scope of this file. 此外，这在技术上不是模块的一部分，只需要在此文件的范围内获取所需的代码。
2. imports: [FormsModule] : You import other modules in here. imports: [FormsModule] ：你在这里导入其他模块。 For example we import FormsModule in the example below. 例如，我们在下面的示例中导入FormsModule 。 Now we can use the functionality which the FormsModule has to offer throughout this module. 现在我们可以使用FormsModule在整个模块中提供的功能。
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive] : You put your components, directives, and pipes here. declarations: [OnlineHeaderComponent, ReCaptcha2Directive] ：您将组件，指令和管道放在此处。 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). 例如，我们现在可以在AppComponent视图（html文件）中使用OnlineHeaderComponent 。 Angular knows where to find this OnlineHeaderComponent because it is declared in the @NgModule . Angular知道在哪里找到这个OnlineHeaderComponent因为它是在@NgModule声明的。
4. providers: [RegisterService] : Here our services of this specific module are defined. providers: [RegisterService] ：这里定义了我们这个特定模块的服务。 You can use the services in your components by injecting with dependency injection. 您可以通过注入依赖项注入来使用组件中的服务。

Example module: 示例模块：

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

---

#6楼

Adding quick cheatsheet that may help after longer break with Angular: 添加快速备忘单，可在Angular长时间休息后提供帮助：

declarations: [AppComponent], //components, pipes, directives
imports: [BrowserModule, AppRoutingModule], //import other modules which you will use
providers: [UserService], //services
bootstrap: [AppComponent], //main component that will be generate by this module
entryComponents: [PopupComponent] //dynamically added components that are added using ViewContainerRef.createComponent()