Angular 12 Redirect to New Component with Routing Tutorial

Last updated on: by Digamber

Hello folks! Today I am going to show you how to redirect to new pages or components in Angular application using Angular routing service.

Angular offers powerful routing system to redirect to your favorite routes. Ideally, when your app initializes it redirects to the empty route by default.

So, first we have to setup app-routing.module.ts file to enable redirection service in Angular.

After setting up app-routing.module.ts file we can configure the Angular routing service to redirect to named URLs.

Step: 1 – Generate App Routing File for Angular Redirection Service

ng generate module app-routing --flat --module=app
  • –flat adds the file in src/app folder rather than in its own folder.
  • –module=app orders the command linte tool to register it in the imports array of the app.module.ts.

Once the file is generated it will look like the following file.

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

  declarations: [],
  imports: [
export class AppRoutingModule { }

Step: 2 – Register AppRoutingModule in app.module.ts

Go to app.module.ts file, paste the given below code for creating navigation service in your Angular 7|8|9 app.

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

  declarations: [...],
  imports: [
  providers: [...],
  bootstrap: [...]

Step: 3 – How to create app-routing.module.ts file for Angular 7|8|9 redirection service

import { NgModule } from '@angular/core';
// Required services for navigation
import { Routes, RouterModule } from '@angular/router';

// Import all the components for which navigation service has to be activated 
import { HomeComponent } from '../../components/home.component';
import { AboutComponent } from '../../components/about.component';
import { ProductsComponent } from '../../components/products.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  { path: '**', component: HomeComponent } // If no matching route found, go back to home route

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]

export class AppRoutingModule { }

We have successfully created Angular 7|8|9 redirect service using angular routes and RouterModule service.

Let’s understand what is going on in here.

redirectTo: ‘/home’: We are using this property within the routes array to tell angular route service if the users navigate to the empty URL they should be redirected to the home URL rather than the empty URL.

pathMatch: ‘full’: This property commands the Angular that an empty URL should match the exact string path not partially empty string.

path: ‘**’: These two stars are used for letting the Angular know If no matching route found, then go back to the mentioned route. In our case, we have declared HomeComponent.

Step: 4 – How to use Routing Service Attributes

     <li><a routerLink="/home" routerLinkActive="active">Home</a></li>
     <li><a routerLink="/about" routerLinkActive="active">About</a></li>
     <li><a routerLink="/products" routerLinkActive="active">Products</a></li>

As you can see we have created app routing service and integrated required components for which routing service needs to be activated.

Let’s check out what is going on in here.

  • routerLink=”/home”: This tag allows you to link to specific routes in your application.
  • routerLinkActive=”active”: This tag is used to allow active class on the clicked route.

Feel free to contact me if you’re looking for a Freelance Angular 2 web developer, I also offer remote contracting services to clients around the world.


I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.