Introduction

In this tutorial we will see how to create or add routes to existing Angular project. The situation may arise when you forget to add routes while creating new project or probably you thought that routes may not be required but later you find that routes are required for appropriate navigation in your application.

By the time you discover routes are required for your application you might have already implemented few functionalities and probably you are not interested to create another project to start over again with the same features. Then you need to create or add routes to your existing Angular project.

You can add routes to your existing Angular project in any one of the two ways – either manually or automatically. But remember you have to configure routes manually.

Prerequisites

Angular 2 or above

Add Routes Manually

If you want to add routes manually then you need to first create a TypeScript file called app-routing.module.ts in your src/app folder.

Let’s take an example of adding routes for user CRUD operations, so the routing configuration may look like the following example file.

The first two import statements are mandatory. The next four import statements are component based and I assume these components are already exist in the application. This configuration should be done according to your components.

Next is you need to configure the Routes. Routes configuration requires HTTP request path and decides where to redirect or which component to render on UI (User Interface).

The @NgModule({...}) configuration remains same. The last line also remains same.

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

import { UserListComponent } from './user-list/user-list.component';
import { UserAddComponent } from './user-add/user-add.component';
import { UserEditComponent } from './user-edit/user-edit.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/users', pathMatch: 'full' },
  { path: 'users', component: UserListComponent },
  { path: 'detail/:id', component: UserDetailComponent },
  { path: 'edit/:id', component: UserEditComponent },
  { path: 'add', component: UserAddComponent }
];

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

Then import app-routing.module.ts file in src/app/app.module.ts file as follows:

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

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

Notice the last import statement in the above code snippets.

Add Routes Automatically

By automatically I mean you have to generate routes using Angular CLI command.

The routes generation for existing Angular project has been tested with Angular version 5 or above.

You need to execute the below command from your project’s root directory:

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

In the above command, –flat means it will put the generated app-routing.module.ts TypeScript file under src/app folder. If you do not use this option then it will create a folder app-routing under src/app and put the file app-routing.module.ts into it.

--module=app tells the CLI to register it in the imports array of the AppModule.

The generated file app-routing.module.ts is given below:

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class AppRoutingModule { }

Next step is to configure routes yourself and you can have a look at the example above for manually added routes.

You don’t need to import app-routing.module.ts file in src/app/app.module.ts file as it will be automatically imported.

Next you need to check the file src/index.html whether the entry <base href="/"> is there or not. If not then add it.

Finally you can add <router-outlet></router-outlet> on HTML page, for example, src/app/app.component.html to display the route view.

Thanks for reading.