Setting Wild Card Route in Angular

In the post Angular Routing Concepts With Example we saw an example of setting up routes for navigation. One question though is what if user navigates to a path that does not exist. Ideally you should also handle such scenario and show a page not found or navigate to home page when user tries to navigate to a non-existent path. In this post we’ll see how to set up wild card route in Angular to handle any case when the requested URL doesn’t match any router path.

In this example wild card route is set up to show page not found message.

Wild card route in Angular

For setting up a wild card route in Angular you use ‘**’ (double asterisk). This wild card route catches all routes that are not configured with in the route definition.

{ path: '**', component: COMPONENT_NAME}

Do ensure that the wildcard route is the last one in the route definition ordering as wild card route matches every URL.

This order of routes is important because the Router uses a first-match wins strategy. When matching routes if wildcard route, which matches every URL, is at the top then the component paired with wildroute will be the one always called. Follow the order of-

List routes with a static path first.
Empty path route (with a possible redirection).
The wildcard route comes last.

Wild card route Angular Example

Routing module with route definitions including wild card route (app-routing.module.ts).

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

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

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

Do notice the route order, static paths first, then the default route redirect using empty path and then the wild card route.

PageNotFoundComponent (pagenotfound.component.ts)

@Component({
  selector: 'app-pagenotfound',
  templateUrl: './pagenotfound.component.html'
})
export class PageNotFoundComponent{

}

pagenotfound.component.html

<h3>404 Page Not Found!!</h3>

For other component’s code please refer this post- Angular Routing Concepts With Example

Now if you try to navigate any URL that doesn’t match any of the configured routes you will be sent to PageNotFoundComponent.

That's all for this topic Setting Wild Card Route in Angular. 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

Monday, August 17, 2020