A module is the bucket that contains the basic building blocks (components, services, etc) of an angular application. Every Angular application must have at least one module. Best practice says we define this as app.module. A module has the following key items defined within it.

• Declarations – list of components/directives/pipes that included in this module
• Imports – modules/objects that are imported and required as part of this module
• Exports – modules/objects that are made available to other modules that may import this one
• Providers – Services that are made available to all components within this module
• Bootstrap – Instruction for how Angular is to get started

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { OrgChartComponent } from './org-chart/org-chart.component';
import { PositionComponent } from './position/position.component';
import { DataService } from './data.service';
import { SalaryService } from './salary.service';

import { VisualComponentsModule } from './visual-components.module/visual-components.module';

@NgModule({
  declarations: [
    AppComponent,
    OrgChartComponent,
    PositionComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    VisualComponentsModule
  ],
  providers: [
    DataService,
    SalaryService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Components can only be shared via a module. We can have modules with a single component, as shown below. This module can now be exported/exposed for other modules to use.

import { NgModule } from '@angular/core';
import { MyVisualComponent } from './my-visual.component';

@NgModule({
  declarations: [
    MyVisualComponent
  ],
  exports: [
    MyVisualComponent
  ]
})
export class VisualComponentsModule { }

Any service provided by a module will also be made available to other modules that import this module. In other words, both Providers and Exports are made to other modules importing this module.

AppModule –> SharedModule –> OtherModule

The AppModule will be able to access all services/providers/export modules exposed in the OtherModule.

 

Module Organization

Modules can be categorized into the following. This is best practice:

• AppModule – the main app module, may also include a AppRoutingModule
• FeatureModules – distinct features of an application
• SharedModules – this may be imported by multiple modules throughout the app, whenever needed
• CoreModule – this should be imported only once by AppModule

In routing, a parent module can allow a child module to control the routing in that module by calling “forChild” instead of “forRoot”.

 

Bootstrapping

The most common way to bootstrap an Angular application is to do it in the main.ts file (generated by Angular CLI if used). The bootstrapping process sets up the execution environment, digs the root AppComponent out of the module’s bootstrap array, creates an instance of that component and inserts it into the element tag identified by that component’s selector. This is usually a one time definition that does not change.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

 

eof