Implementing routing in separate module in angular

Suggested Videos
Part 16 - TSLint in Visual Studio Code | Text | Slides
Part 17 - Angular Routing | Text | Slides
Part 18 - How routing works in angular | Text | Slides

In this video we will discuss, implementing routing in a separate routing module.


In Part 17 of Angular CLI tutorial, we implemented routing. At the moment, all the routing code is implemented in the root AppModule. However, for separation of concerns and maintainability, it is better to implement routing in a separate module and then import that routing module in the AppModule. If routing is in it's own module, it is easier to find and change routing code if required.


Moving routing code into it's own module is easy and straight forward

Step 1 : Create a new file in the 'app' folder. Name it app-routing.module.ts

Step 2 : Copy and paste the following code in it. The code is commented and self-explanatory.

// Import NgModule decorator to decorate AppRoutingModule class

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

// Import RouterModule and Routes type from angular router library

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

// Import the following 3 components as we will reference

// them in the route definitions below

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

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

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

// Configure the routes. The Routes type and the

// referenced components are imported above

const appRoutes: Routes = [

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

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

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

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

];

// The NgModule decorator is imported above

// Pass the configured routes to the forRoot() method

// to let the angular router know about our routes

// Export the imported RouterModule so it is available

// to the module that imports this AppRoutingModule

@NgModule({

  imports: [RouterModule.forRoot(appRoutes)],

  exports: [RouterModule],

})

export class AppRoutingModule { }

Step 3 : Modify the code in the root AppModule in app.module.ts. The code is commented and self-explanatory.

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

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

import { AppRoutingModule } from './app-routing.module';

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

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

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

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

@NgModule({

  declarations: [

    AppComponent,

    HomeComponent,

    EmployeesComponent,

    PageNotFoundComponent

  ],

  // Import AppRoutingModule which contains our routing code

  // AppRoutingModule has also exported angular RouterModule, so

  // all the RouterModule features are also availble to this module

  // including the <router-outlet> directive used in the AppComponent

  // If AppRoutingModule module did not export RouterModule we get

  // 'router-outlet' is not a known element error

  imports: [BrowserModule, AppRoutingModule],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Save all changes and run the project using the following command
ng serve --open

Notice routing in our angular application works exactly the same way as before. We now have routing implemented in it's own module.

To quickly recap, here are the steps to implement routing in a separate module.

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.

In our next video, we will discuss, how Angular CLI generates most of this routing code out of the box.