Understand Module In Angular 2

Introduction

Angular 2 Applications follows the modular structure. Angular 2 Applicatons have one or more modules. Each module has a single dedicated purpose. The module helps us to organize the Application's cohesive group of functionality.

Angular module is in a class with @NgModule decorator function. The @NgModule decorator has metadata, which tells Angular, how to compile and run the module code. Metadata helps to identify the module’s directives, components and pipes. Using metadata, we can make them public, so external components can use them. Angular module exports some function, value and classes from their code.

Angular Modularity provides a great way to organize and extend the Application. Angular 2 has many libraries, which are built as modules like HttpModule, RouterModule etc. The modules can be loaded, when the Application starts and we can make them lazy, loaded asynchronously by the router.

Every Angular Application has at least one module. It is generally referred as "root module". This root module is used to bootstrap the Application. Normally, root module is required in the simple Application. As the Application grows, we need to refactor the root module into the different feature modules, which have related functionality. These feature modules are imported into the root module.

Root Module - AppModule

Every Angular Application has a root module and this class is called “AppModule” by convention.



The decorator @NgModule defines the metadata for the module. Here, we need to import helper module called "BrowserModule". This module needs to be imported by every Browser based Application. It registers the Application Service providers and it also contains the definition of common directives such as NgFor and NgIf. The "declarations" part is a list type and identifies the component of the Applications. In above example, we defined component "AppComponent".

The bootstrap property of the module identifies the Application component as a bootstrap component and it renders HTML inside the component in DOM, when Angular launches an Application.

Bootstrapping in main.ts file

The bootstrapping of AppModule is done in main.ts file. Angular offers many bootstrapping options. Here, we consider two options.

Dynamic bootstrapping of Module with the JIT(Just-In-Time) compiler

In this option, Angular compiles the Application in the Browser and after compiling the application successfully, it launches the Application.

Dynamic bootstrapping of module - Main.ts

//Browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

//Application module
import { AppModule } from './app.module';

//Compile and load application module
platformBrowserDynamic().bootstrapModule(AppModule);

Static bootstrapping with the AOT (Ahead-Of-Time) compiler

In this option, ahead of time, part of the compiler runs as part of build and generates many class factories. The module "AppModuleNgFactory" is one of them. The bootstrapping done with AppModuleNgFactory is very similar to the dynamic version.

Here, the entire Application was precompiled. Hence, Angular compiler does not need to compile the Application in the Browser. The Application code used in static compilation is much smaller than the dynamic compilation and also it is ready to run immediately.

Static bootstrapping of module - Main.ts

//Browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

//Application module
import { AppModule } from './app.module';

//Compile and load application module
platformBrowserDynamic().bootstrapModule(AppModule);

Both the compilers (JIT and AOT) generate AppModuleNgFactory class from AppModule code. The JIT compiler creates this class at run time in the Browser memory and AOT compiler creates the physical file for this class. This class needs to import in the static version of main.cs file.

Feature Module

It is a class, which decorates with @Ngmodule decorator. Its metadata is very similar to the root module and it has the same properties as the metadata for a root module.

Both the modules share the same execution context and dependency injector. The following two are major differences between root modules and feature modules.
 

Root Modules	Feature Modules
Required to boot the root module to run the Application.	Required to import the feature module to extend the Application.
It is very straightforward and visible.	It can hide or expose the module implementation from the other modules.

The feature modules contain the functionality on Application business domain, Workflow or provide the collection of the related utilities. The feature modules help us to classify the Application into the various areas.

Example

Here, I have created two different components and modules. I have also created one root module (app.module.ts) and one feature module (other.module.ts). Here, I am using Typescript, so extensions of the files are “ts”.

other.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'other-comp',
template: '<input #txtName type = "text" (keyup)="0" />' +
'<br/>' +
'<p>You have Enter: {{txtName.value}}</p>'
})
export class OtherComponent { }

other.module.ts

import { NgModule } from '@angular/core';
import { OtherComponent } from './other.component';
@NgModule({
imports: [],
declarations: [ OtherComponent ],
exports: [ OtherComponent ],
})
export class OtherModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'test-app',
template: '<h1>This is my Angular 2 Application</h1>' +
'<br/>' +
'<other-comp>loading...</other-comp>'
})
export class AppComponent { }

app.module.ts

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

import { AppComponent } from './app.component';
import { OtherModule } from './other/other.module';

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

Following is the file structure for this example-



Here, I have an import feature module called "OtherModule" into "AppModule", because its component needs to be used in AppComponent.

Output

When we run the code, mentioned above, it will render HTML defined in the template.