Angular CLI generate routing module

Suggested Videos
Part 17 - Angular Routing | Text | Slides
Part 18 - How routing works in angular | Text | Slides
Part 19 - Implementing routing in separate module in angular | Text | Slides

In this video we will discuss generating routing module using the Angular CLI.


To make Angular CLI generate a routing module, all you have to do is use --routing option along with the ng new command when generating a new Angular project.
ng new RoutingDemo --routing

In our previous video, we discussed the steps to implement routing in a separate module, and them import that routing module in the application root module AppModule. Here are those steps.


Step 1 : Set <base href> in index.html.

Step 2 : Create a separate routing module file. You can name it anything you want. I named it app-routing.module.ts.

Step 3 : Import the angular RouterModule into your application routing module (app-routing.module.ts). Also don't forget to re-export RouterModule.

Step 4 : Configure the application routes. 

Step 5 : Import the application routing module (app-routing.module.ts) in the root AppModule.

Step 6 : Specify where you want the routed component view template to be displayed using the <router-outlet> directive

Step 7 : Create a navigation menu and tie the configured routes with the menu using the routerLink directive. Optionally, use the routerLinkActive directive to style the current route that is active, so the user knows the page that he is on, in the application.

Out of the above 7 steps, we only need to implement steps 4 & 7. The rest of the steps are implemented by the Angular CLI out of the box. Just imagine the amount of time we save.

Before we can implement steps 4 & 7. Let's generate the following 3 components.

Component	Angular CLI Command
HomeComponent	ng g c home
EmployeesComponent	ng g c employees
PageNotFoundComponent	ng g c pageNotFound

Now let's implement Step 4. In app-routing.module.ts file specify the application routes. Copy and paste the following code. In addition to the routes, notice we are also importing HomeComponent, EmployeesComponent & PageNotFoundComponent as we are referencing these components in the route configuration.

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

import { EmployeesComponent } from './employees/employees.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [

  { path: 'home', component: HomeComponent },

  { path: 'employees', component: EmployeesComponent },

  { path: '', redirectTo: '/home', pathMatch: 'full' },

  { path: '**', component: PageNotFoundComponent }

];

Now let's implement Step 4. In app.component.html copy and paste the following code.

<div style="padding:5px">

    <ul class="nav nav-tabs">

        <li routerLinkActive="active">

            <a routerLink="home">Home</a>

        </li>

        <li routerLinkActive="active">

            <a routerLink="employees">Employees</a>

        </li>

    </ul>

    <br/>

    <router-outlet></router-outlet>

</div>

Finally we need to install and reference Bootstrap, to style the navigation menu. To install bootstrap execute the following npm command. We can execute this command in the command prompt window or in the integrated terminal window in Visual Studio Code.
npm install bootstrap@3 --save

Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet in the styles property as shown below.

"styles": [

  "../node_modules/bootstrap/dist/css/bootstrap.min.css",

  "styles.css"

]

At this point stop the server. Build and run the application again using the following Angular CLI command. Routing should be working as expected.
ng serve --open