Tips and Hints on Angular 2 Modules Usage

What is Angular 2 module?

"Simply it's like a box which encapsulates angular components"

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

@NgModule({})

• 
  

  Class which decorated with NgModule

  
  


• 
  

  Arrange code in modular way

  
  


• 
  

  Extend our application with external modules

  
  

Some useful tips as below; 

Tip #1

Every application must bootstrap one component, which known as "root application component".

[code language="javascript"]
bootstrap: [
AppComponent
]

[/code]

Tip #2

Every components, directives and pipes must only belong to only one Angular module.

Because we follow singleton design pattern.

Tip #3

Only declare components, directives and pipes under declarations array.

[code language="javascript"]
declarations: [
AppComponent
, AppFilterPipe
, AppDirective
]
[/code]

Tip #4

Never re-declare modules belongs to another module, because if we do so we polluting core objective of Angular modules.

Tip #5

All declared components are private by default and only accessible to current module unless explicitly export them.

Tip #6

To consume directives within template, you must declare directive within the module or imported from external module.

Tip #7

Export/ Re-export components, directives & pipes when ever who need, means that you are not restrict on that.

Tip #8

No need of any imports to export our components, directives and pipes.

Tip #9

Never export services and declare those within providers array, since then its shared within all module.

[code language="javascript"]
providers: [AppGuard]
[/code]

Tip #10

Imported components, directives, pipes (it can be Angualar or 3^rd party) makes available any exported module consumable within our module.

[code language="javascript"]
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
//external component imports,
imports: [
BrowserModule
, FormsModule
}
})
[/code]

Tip #11

Importing module does not mean that you have access to its imported modules. Simply imports are not inherited!

Tip #12

Avoid declaring services of shared modules in providers array since we must ensure modules not imported my times in the app.

Tip #13

Route guards must be declared within providers since navigation control is applicable to app level.