Skip to main content

Angular - Frequently Used NgModules

Frequently Used Modules

Prerequisites

A basic understanding of Bootstrapping.

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:
NgModuleImport it fromWhy you use it
BrowserModule@angular/platform-browserWhen you want to run your app in a browser
CommonModule@angular/commonWhen you want to use NgIfNgFor
FormsModule@angular/formsWhen you build template driven forms (includes NgModel)
ReactiveFormsModule@angular/formsWhen building reactive forms
RouterModule@angular/routerFor Routing and when you want to use RouterLink,.forRoot(), and .forChild()
HttpClientModule@angular/common/httpWhen you to talk to a server

Importing modules

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 CLI,BrowserModule is the first import at the top of the AppModuleapp.module.ts.
  1. /* import modules so that AppModule can access them */
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { NgModule } from '@angular/core';
  4.  
  5. import { AppComponent } from './app.component';
  6.  
  7. @NgModule({
  8. declarations: [
  9. AppComponent
  10. ],
  11. imports: [ /* add modules here so Angular knows to use them */
  12. BrowserModule,
  13. ],
  14. providers: [],
  15. bootstrap: [AppComponent]
  16. })
  17. export class AppModule { }

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 and CommonModule

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.
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.
If you do import BrowserModule into a lazy loaded feature module, Angular returns an error telling you to use CommonModule instead.
BrowserModule error

More on NgModules

You may also be interested in the following:

Comments