Frequently used Modules

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:

Below is a more elaborate list of the most frequently used modules in angular, their functions and sample syntax.

BrowserModule:

Exports required infrastructure for all Angular apps. Included by default in all Angular apps created with the CLI new command. Re-exports CommonModule and ApplicationModule, making their exports and providers available to all apps.

class BrowserModule {
  static withServerTransition(params: { appId: string; }): 
ModuleWithProviders<BrowserModule>
}

commonModule

Exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. Re-exported by BrowserModule, which is included automatically in the root AppModule when you create a new app with the CLI new command.

class CommonModule {
}

FormsModule:

Exports the required providers and directives for template-driven forms, making them available for import by NgModules that import this module.

class FormsModule {
  static withConfig(opts: { warnOnDeprecatedNgFormSelector?: "never" |
 "once" | "always"; }): ModuleWithProviders<FormsModule>
}

ReactiveFormsModule:

Exports the required infrastructure and directives for reactive forms, making them available for import by NgModules that import this module.

class ReactiveFormsModule {
  static withConfig(opts: { warnOnNgModelWithFormControl: "never" |
 "once" | "always"; }): ModuleWithProviders<ReactiveFormsModule>
}

RouterModule

Adds router directives and providers.

class RouterModule {
  static forRoot(routes: Route[], config?: ExtraOptions):
 ModuleWithProviders<RouterModule>
  static forChild(routes: Route[]): ModuleWithProviders<RouterModule>
}

HttpClientModule

Configures the dependency injector for HttpClient with supporting services for XSRF. Automatically imported by HttpClientModule.

class HttpClientModule {
}

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 Angular CLI, BrowserModule is the first import at the top of the AppModule, app.module.ts.

TypeScript Code:

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

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen importingModule by w3resource (@w3resource) on CodePen.

The imports at the top of the array are JavaScript import statements while the imports array within @NgModule is Angular specific.

BrowserModule and CommonModule

BrowserModule imports CommonModule, which contributes to 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.

Previous: Angular Module Vs JsModule
Next: Entry Components