Modules in Angular

Modules is a mechanism to group components,directives,pipes and services which are related. An angular application can be thought as a puzzle where piece or module is complete in itself.
Modules are classes where we can hide or show directives,pipes and services to outer world using export keyword.
Ex. Using NgModule decorator we can create module

+

import { NgModule } from '@angular/core';

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

Property import expect an array of modules.

Property declarations expects an array of components, directives and pipes that are part of module.

Property bootstrap expects an array of component genrally we define here root component.

Example of app.module

import {NgMdule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppCompnonent} ./app-component'


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

}

Here our module is importing BrowserModule, which indicate that app-module is root module.
BrowserNModule is built-in module that imports basic directives,pipes and services. In angular Js we we have to explicitly imports those dependencies. to use *ngFor and *ngIf.

Here AppComponent is root component that's why it is given in bootstrap. Because in declarations we have to define all component that's why we have to define it again in declaration.

There are two types of modules. Root module and feature module.In an angular application there is one root module and others are feature module.

By convention, the root module should always be named AppModule.

Bootstrapping an Application

To bootstrap and angualr application, we need to inform Angular which one is our root module to perform the compilation in browser. This compilation is known as "Just in Time" compilation.

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

It is also possible to perform the compilation as a build step of our workflow. This method is called "Ahead of Time" (AOT) compilation and will require a slightly different bootstrap process