NgModule Basics

NgModules configure the injector and the compiler and help organize related things together.

An NgModule is a class marked by the @NgModule decorator. @NgModule takes a metadata object that describes how to compile a component’s template and how to create an injector at runtime. It identifies the module’s own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.

Angular Modularity

Modules are a great way to organize an application and extend it with capabilities from external libraries.

Angular libraries are NgModules, such as FormsModule, HttpClientModule, and RouterModule. Many third-party libraries are available as NgModules such as Material Design, Ionic, and AngularFire2.

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

Modules can also add services to the application. Such services might be internally developed, like something you’d develop yourself or come from outside sources, such as the Angular router and HTTP client.

Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.

NgModule metadata does the following:

Declares which components, directives, and pipes belong to the module.
Makes some of those components, directives, and pipes public so that other module’s component templates can use them.
Imports other modules with the components, directives, and pipes that components in the current module need.
Provides services that the other application components can use.

Every Angular app has at least one module, the root module. You bootstrap that module to launch the application.

The root module is all you need in a simple application with a few components. As the app grows, you refactor the root module into feature modules that represent collections of related functionality. You then import these modules into the root module.

The basic NgModule

The CLI generates the following basic app module when creating a new app.

src/app/app.module.ts

// imports

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { FormsModule } from ‘@angular/forms’;

import { HttpModule } from ‘@angular/http’;

import { AppComponent } from ‘./app.component’;

import { ItemDirective } from ‘./item.directive’;

// @NgModule decorator with its metadata

@NgModule({

declarations: [

AppComponent,

ItemDirective

imports: [

BrowserModule,

FormsModule,

HttpModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

At the top are the import statements. The next section is where you configure the @NgModule by stating what components and directives belong to it (declarations) as well as which other modules it uses (imports).

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:

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	When you want to use NgIf, NgFor
FormsModule	@angular/forms	When you build template driven forms (includes NgModel)
ReactiveFormsModule	@angular/forms	When building reactive forms
RouterModule	@angular/router	For Routing and when you want to use RouterLink,.forRoot(), and .forChild()
HttpClientModule	@angular/common/http	When 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 AppModule, app.module.ts.

/* import modules so that AppModule can access them */