Angular2 ngModule

Modules

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

Many Angular libraries are modules (e.g, FormsModule, HttpModule, RouterModule). Many third party libraries are available as Angular modules (e.g., Material Design, Ionic, AngularFire2).

Why ngModule?

• Lazy loading of part in apllication
• Providers inheritance
• Library architecture
• Easy to use
• Easy to migrate from angular.module()

AppModule - application root module

Every Angular app has a root module class. By convention it's a class called AppModule in a file named app.module.ts.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

NgModule - declarations

List of module's:

1. Components
2. Directives
3. Pipes

NgModule - providers

1. Application services
2. Other libraries services

NgModule - imports

• Load other modules
• Official modules
  • BrowserModule
  • HttpModule
  • RouterModule
  • FormsModule
  • MaterialModule