Angular Wild Card Routes

In the previous article, we’ve learned about the basics of routing and navigation and how to switch between components using routerLink with a block diagram and live example.

But the limitation of the previous article was it’ll work for the declared components only. By declared component, we meant if we search for a component that doesn’t exist it’ll throw an error to the console.

Let’s search for an undeclared component and see the result in the browser:

angular non existing route call

We took a random component “abc” which doesn’t exist in our app.

After clicking on enter key we’re getting the above error in the console.

angular can not match any routes error in console

So to overcome this limitation Angular has Wild Card Routing Technique.

What is Wild Card Routing in Angular?

We generally use Angular wild card routing because if any users want to access a page that doesn’t exist Angular will display a “page not found” in the browser which gives clarity to the user.

Let’s see the steps to implement this:

Step-1: Generate a page-not-found component

NOTE: You’ve learned how to generate components in one of our previous articles. If not, check it out!!

Step-2: Configure the routes

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ComponentNameComponent } from './component-name/component-name.component';

const routes: Routes = [
  {path:'', redirectTo:'/component-name', pathMatch:'full'},
  {path:'component-name', component:ComponentNameComponent},
  {path:'**', component:PageNotFoundComponent}
]

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

export class AppRoutingModule { }
export const routingComponents=[ComponentNameComponent,PageNotFoundComponent]
  • In the const route add a new object with a path and component in it.
  • Set path to **.
  • Set component to PageNotFoundComonent and also import it.

NOTE: To learn how to configure the path in detail, please refer to the previous article where each step is explained completely.

We’re done with the code, let’s the result in the browser.

angular wild card implementaion to handle can not match any route error

We’ve searched for the same undeclared component and this time it’s showing a page not found in the browser.

NOTE: Always declare the Wild Card Routing object at the end in the Routes array, otherwise it will show a page not found for every case.

Conclusion

We hope this article has helped you to understand wild card routing in angular and its use. It’s a simple yet vital part of any real-world application you’re working on. It gives clarity to the user that they have searched for the wrong pages which gives a good user experience.

Read Next: Angular Routing Parameters

Leave a Reply

Your email address will not be published. Required fields are marked *