填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
常用模块

常用模块

Frequently-used modules

Angular 应用至少需要一个充当根模块使用的模块。 如果你要把某些特性添加到应用中，可以通过添加模块来实现。 下列是一些常用的 Angular 模块，其中带有一些其内容物的例子：

An Angular app needs at least one module that serves as the root module. As you add features to your app, you can add them in modules. The following are frequently used Angular modules with examples of some of the things they contain:

NgModule

导入自

Import it from

为何使用

Why you use it

BrowserModule

@angular/platform-browser

当你想要在浏览器中运行应用时

When you want to run your app in a browser

CommonModule

@angular/common

当你想要使用 NgIf 和 NgFor 时

When you want to use NgIf, NgFor

FormsModule

@angular/forms

当要构建模板驱动表单时（它包含 NgModel ）

When you want to build template driven forms (includes NgModel)

ReactiveFormsModule

@angular/forms

当要构建响应式表单时

When you want to build reactive forms

RouterModule@angular/router

要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时

When you want to use RouterLink,.forRoot(), and .forChild()

HttpClientModule

@angular/common/http

当你要和服务器对话时

When you want to talk to a server

导入模块

Importing modules

当你使用这些 Angular 模块时，在 AppModule（或适当的特性模块）中导入它们，并把它们列在当前 @NgModule 的 imports 数组中。比如，在 Angular CLI 生成的基本应用中，BrowserModule 会在 app.module.ts 中 AppModule 的顶部最先导入。

When you use these Angular modules, import them in AppModule, or your feature module as appropriate, and list them in the @NgModule imports array. For example, in the basic app generated by the Angular CLI, BrowserModule is the first import at the top of the AppModule, app.module.ts.

/* import modules so that AppModule can access them */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ /* add modules here so Angular knows to use them */ BrowserModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
      
      /* import modules so that AppModule can access them */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ /* add modules here so Angular knows to use them */
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

文件顶部的这些导入是 JavaScript 的导入语句，而 @NgModule 中的 imports 数组则是 Angular 特有的。 要了解更多的不同点，参见 JavaScript 模块 vs. NgModule。

The imports at the top of the array are JavaScript import statements while the imports array within @NgModule is Angular specific. For more information on the difference, see JavaScript Modules vs. NgModules.

BrowserModule 和 CommonModule

BrowserModule and CommonModule

BrowserModule 导入了 CommonModule，它贡献了很多通用的指令，比如 ngIf 和 ngFor。 另外，BrowserModule 重新导出了 CommonModule，以便它所有的指令在任何导入了 BrowserModule 的模块中都可以使用。

BrowserModule imports CommonModule, which contributes many common directives such as ngIf and ngFor. Additionally, BrowserModule re-exports CommonModule making all of its directives available to any module that imports BrowserModule.

对于运行在浏览器中的应用来说，都必须在根模块中 AppModule 导入 BrowserModule ，因为它提供了启动和运行浏览器应用时某些必须的服务。BrowserModule 的提供者是面向整个应用的，所以它只能在根模块中使用，而不是特性模块。 特性模块只需要 CommonModule 中的常用指令，它们不需要重新安装所有全应用级的服务。

For apps that run in the browser, import BrowserModule in the root AppModule because it provides services that are essential to launch and run a browser app. BrowserModule’s providers are for the whole app so it should only be in the root module, not in feature modules. Feature modules only need the common directives in CommonModule; they don’t need to re-install app-wide providers.

如果你把 BrowserModule 导入了惰性加载的特性模块中，Angular 就会返回一个错误，并告诉你要改用 CommonModule。

If you do import BrowserModule into a lazy loaded feature module, Angular returns an error telling you to use CommonModule instead.

BrowserModule error

关于 NgModule 的更多知识

More on NgModules

你可能还对下列内容感兴趣：

You may also be interested in the following: