Adding new Component/Module in Angular 2 Cli Project

If you have created an Angular 2/4 project using Angular CLI now if you want to add new component/module you need need to perform the following changes:

For demo we are adding a home module to newly created Angular 2 CLI project.

Step 1: Add new folder inside the app called 'home'.
Step 2: Add home.component.ts | home.component.html | home.component.css | home.component.spec.ts | index.ts files
Step 3: Also add app.routing.ts inside the app folder.
Step 4: Now add new route to the app.routing.ts file:

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

import { HomeComponent } from './home/index';

const appRoutes: Routes = [
 {path: '', component: HomeComponent},
 {path:'**', redirectTo: ''} //otherwise
];

export const routing = RouterModule.forRoot(appRoutes);

Step 5: Modify the app.module.ts to add new component/module:

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

 declarations: [

    HomeComponent
  ]

imports: [
    routing
  ]

Step 6: Modify the app.component.html file and add/replace the following:

This is all about to add new module/component with existing Angular 2/4 project.