How to Add Routing to an Existing Angular Project?

In Angular, routing allows you to define different paths for different components and modules in your application.

When you create a new Angular application with Angular CLI using the ng new command, it asks whether you want to add routing to this new project or not. You can choose option Y if you want to add routing, or you can choose option N to skip.

So, if you choose option Y, the Angular CLI creates a default routing module file app-routing.module.ts for you where you can define different paths for different components.

Sometimes, we are not sure whether we want to add routing to our project or not, especially when we are creating the Angular application for the very first time, so we just skip it.

Now, let’s say you have an existing Angular project which doesn’t have routing and you want to add it now. How would you do that?

Well, In Angular, there is no such command which can directly create a routing module file for you. You have to create it manually.

In this article, I will step by step guide you how to create a routing to an existing Angular project. So, let’s get started.

Step 1: Generate a new module using Angular CLI

Type the following command in Angular CLI:

ng generate module app-routing --flat --module=app

This command will create a new module file named app-routing.module.ts inside the app folder of your project.

The --flat option will stop the CLI to create the module in its own folder. The --module=app specifies that the new module will be created inside the app module of the project if there are multiple feature modules.

Additionally, it will also add the app-routing module to the imports array of the app.module.ts file, so, you don’t have to manually import and add it to the imports array.

Step 2: Import the RouterModule and Routes interface:

Import the RouterModule and Routes interface inside the app-routing.module.ts file.

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

Step 3: Create a routes Array

As we have already imported the Routes interface, therefore, we can now create the routes array. This array will be used to specify the path for different components.

// Create a routes Array
const routes: Routes = [
  
];

Step 4: Add the RouterModule to the imports and exports array

Now, we need to add the RouterModule to the imports and exports array of the app-routing module so that our Angular app could set up routes for the entire application.

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

Step 5: Add the <router-outlet> directive

The last thing we need to do is, add the <router-outlet></router-outlet> directive to our app.component.html file.

<!-- Inside src/app/app.component.html -->
<router-outlet></router-outlet>

The <router-outlet> directive is used to specify where the routed component should be displayed in the template. It is a placeholder that marks the location in the template where the router should display the component for the active route.

Last Step: Specify the routes

If you have followed all the above steps carefully, you can now specify the routes for your Angular application.

Here is the full app-routing.module.ts file with two routes /home and /products:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';

// Create a routes Array
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
];

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

Below is a demo of working routes:

Conclusion

In this article, we learned how we can add routing to an existing angular project.

In summary, you can follow the below steps to add routing to an existing project:

Generate a new app-routing module using CLI
Import the RouterModule and Routes interface to the app-routing.module.ts file
Create a routes array
Add the RouterModule to the imports and exports array
Add the <router-outlet> to app.component.html file
Specify your routes

Thanks for reading.

Conclusion

Related posts: