Angular 2 - Modules

Modules are used in Angular JS to put logical boundaries in your apppcation. Hence, instead of coding everything into one apppcation, you can instead build everything into separate modules to separate the functionapty of your apppcation. Let’s inspect the code which gets added to the demo apppcation.

In Visual Studio code, go to the app.module.ts folder in your app folder. This is known as the root module class.

The following code will be present in the app.module.ts file.

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

Let’s go through each pne of the code in detail.

The import statement is used to import functionapty from the existing modules. Thus, the first 3 statements are used to import the NgModule, BrowserModule and AppComponent modules into this module.

The NgModule decorator is used to later on define the imports, declarations, and bootstrapping options.

The BrowserModule is required by default for any web based angular apppcation.

The bootstrap option tells Angular which Component to bootstrap in the apppcation.

A module is made up of the following parts −

Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionapty can be accessed in the apppcation. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS apppcation.

Export array − This is used to export components, directives, and pipes which can then be used in other modules.

Import array − Just pke the export array, the import array can be used to import the functionapty from other Angular JS modules.