{ "id": "guide/frequent-ngmodules", "title": "Frequently-used modules", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Frequently-used moduleslink

\n

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

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n NgModule\n \n Import it from\n \n Why you use it\n
BrowserModule@angular/platform-browserWhen you want to run your app in a browser
CommonModule@angular/commonWhen you want to use NgIf, NgFor
FormsModule@angular/formsWhen you want to build template driven forms (includes NgModel)
ReactiveFormsModule@angular/formsWhen you want to build reactive forms
RouterModule@angular/routerWhen you want to use RouterLink, .forRoot(), and .forChild()
HttpClientModule@angular/common/httpWhen you want to talk to a server
\n

Importing moduleslink

\n

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

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

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

\n

BrowserModule and CommonModulelink

\n

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

\n

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

\n

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

\n
\n \"BrowserModule\n
\n

More on NgModuleslink

\n

You may also be interested in the following:

\n\n\n \n
\n\n\n" }