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”.

bootstrap: [
AppComponent
]

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.

declarations: [
AppComponent
, AppFilterPipe
, AppDirective
]

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.

providers: [AppGuard]

Tip #10

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

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

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

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s