Adding angular routing to a project which does not have routing

1. First create a angular project using angular CLI without a routing module

Make the application understand how to construct the URL while navigating by adding <base> tag inside the <head> tag on index.html

<base href="/">

2. Create a file name “app-routing.module.ts” inside the app folder

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


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. import AppRoutingModule in app.module.ts file and also add it in the import section in @NgModule decorator

Note : We can create a project with routing functionality directly while creating a angular project using angular CLI command

ng new project --routing

Note : We can also add routing to an existing project with below command :

ng g module app-routing –flat –module=app

Leave a Comment