Path Redirection in Angular Routing

In this article we'll see how to redirect to a component (URL path) in Angular routing.

Table of contents

Setting redirect in Angular Routing
Angular routing redirect example
Different path matching values
Route order in Angular

Setting redirect in Angular Routing

To set up a redirect in an Angular route definition you will have to use redirectTo property.

For redirection you need to configure a route with the following three things-

path you want to redirect from
The component you want to redirect to
A pathMatch value to tell the router how to match the URL.

For example if you want to set a default route to the home page. When the initial URL in the browser is- localhost:4200 it should redirect automatically to localhost:4200/home.

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

Here path you want to redirect from is '' meaning nothing after the base URL.

redirectTo has a value ‘/home’ which tells the Angular router when we visit path localhost:4200 redirect to the /home route.

Here pathMatch value is full which means redirection happens only if the full path after the base URL is ''.

Angular routing redirect example

Suppose we have three components Home, Account and Service and the app routing module is as given below.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountComponent } from './account.component';
import { HomeComponent } from './home.component';
import { ServiceComponent } from './service.component';


const routes: Routes = [
                        {path: 'home', component: HomeComponent},                  
                        {path: 'account', component: AccountComponent},
                        {path: '', redirectTo:'/home', pathMatch: 'full'},                   
                        {path: 'service', component: ServiceComponent}
                       ];

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

Refer post Angular Routing Concepts With Example to get the whole code.

As per route definition specified in routing module when URL has /home as path it will be handled by this route definition. HomeComponent is the component that will be called to handle this route.

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

Following route definition sets up a redirect to the above definition for home route if path matches '' (i.e. nothing after the base URL).

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

Different path matching values

In the above route definition pathMatch value is used as ‘full’ which means value specified with path will be matched fully with the path after the base URL.

Another value for pathMatch is ‘prefix’ which tells the Angular to check if the path in the URL starts with the value given with path or not.

If you change the route definition to have pathMatch as prefix here-

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

Now every path matches this route definition because technically every path starts with ''.

If you change the pathMatch to ‘prefix’, as per the route definitions given in the routing module in this example you will never be able to reach ServiceComponent because localhost:4200/service will always be matched by the redirect route. Other two routes above the redirect route will work fine because of the route ordering followed by Angular.

Route order in Angular

Angular uses the first-match wins strategy when matching routes so more specific routes should be placed above less specific routes.

Routes with a static path should be placed first.
Then an empty path route which matches the default route.
The wildcard route should be placed last because it matches every URL.

That's all for this topic Path Redirection in Angular Routing. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

Related Topics

You may also like-

Tech Tutorials

Wednesday, August 5, 2020