Angular 2 FAQs

1. What is angular module?

NgModule helps to organize an application into organized blocks of functionality. @NgModule decorator takes metadata that tells angular how to compile and run the module code. A typical NgModule looks like.

Each application in angular 2 must have at least one NgModule that you need to bootstrap to launch your application.

Components of NgModule:

Declarations Array: this includes application’s components only.

Imports Array: this includes modules.

Providers Array: this includes services.

Bootstrap Array: include components to bootstrap, generally one component used  but you can provide multiple components as well if required.

2. Explain Routing in angular 2?

Router package is used for angular 2 routing. And this router comes with many features for routing based on paths and loading specific components.

To define route we can create routes constants in your modules like

const routes=[

  {Path:'',component: HomeComponent},

  {Path:'Contacts',component:ContactsComponent}

];

Then you have to import these routes in NgModule.

@NgModule({

  declarations: [

    AppComponent,

    HomeComponent,

    ContactsComponent   

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule, RouterModule.forRoot(routes)

  ],

  providers: [],

  bootstrap: [AppComponent]

})

Also you have to use router-outlet inside your component.

@Component({

  selector: 'app-root',

  template: '<nav>

             <a routerLink=””>Home</a>

          <a routerLink=”contact”></a>

          </nav>

       <router-outlet></router-outlet>'

})

But this approach can be optimized by putting out routes in separate file.

We can create separate app.route.ts file to define our route.

import { HomeComponent } from './app.component';

import { ContactsComponent } from './app.component';

import { RouterModule } from '@angular/router';

const routes=[

  {Path:'',component: HomeComponent},

  {Path:'Contacts',component:ContactsComponent}

];

export default RouterModule.forRoot(routes);

And then we does not need to import RouterModule.forRoot(routes) inside our module but we simply import this app.rotes that we have created.

import appRoutes from './app.route';

@NgModule({

  declarations: [

    AppComponent,

    ContactsComponent   

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    appRoutes

  ],

  providers: [],

  bootstrap: [AppComponent]

})

You can have separate route for each component as below. This is called lazy loading of modules using angular 2 router.

a.       Create a separate home.route.ts

import { HomeComponent } from "app/home/home.component";

import { RouterModule } from "@angular/router";

const routes = [

{ path: '', component:HomeComponent}

];

export default RouterModule.forRoot(routes);

b.      Configure route into module.

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

import { CommonModule } from "@angular/common";

import { HomeComponent } from "app/home/home.component";

import { RouterModule } from "@angular/router";

import homeRoutes from 'app/home/home.routes';

@NgModule({

imports :[CommonModule, homeRoutes],

providers:[],

declarations:[HomeComponent]

})

export default class HomeModule{

}

c.       Configure individual routes to app.route.ts that we have created earlier. See the difference on above app.route.ts and this.

import { HomeComponent } from './app.component';

import { ContactsComponent } from './app.component';

import { RouterModule } from '@angular/router';

import {CommonModule} from '@angular/common'

const routes=[

  {Path:'',loadChildren: 'app/home/home.module'},

  {Path:'Contacts',loadChildren:'app/contact/contact.module'}

];

export default RouterModule.forRoot(routes);