Wildcard Route in Angular

Back to: Angular Tutorials For Beginners and Professionals

Wildcard Route in Angular Application

In this article, I am going to discuss Wildcard Route in Angular Application. This is a continuation part of our previous article where we discussed Redirecting Route in Angular Application. So, please read our previous article before proceeding to this article as we are going to work with the same example that we worked so far in this Routing series. At the end of this article, you will understand what exactly Wildcard Route is and when and how to use Wildcard Route in Angular Application.

What is Wildcard Route in Angular?

The Wildcard Route is basically used in Angular Application to handle the invalid URLs. Whenever the user enter some invalid URL or if you have deleted some existing URL from your application, then by default 404 page not found error page is displayed. In such scenarios instead of showing the default error page, if you also show a custom error page and this is possible by using the Angular Wildcard Route.

How to use Wildcard Route in Angular?

A Wildcard route has a path consisting of two asterisks (**). It matches every URL, the router will select this route if it can’t match a route earlier in the configuration. A Wildcard Route can navigate to a custom component or can redirect to an existing route. The syntax to use Wildcard Route is given below.

Understanding Angular Wildcard Route with an example:

Let us understand Wildcard Route with an example. First create one component for display the custom error message.

Creating Custom Error Component:

Open terminal and type ng g c customerror and press the enter button as shown in the below image.

Once you press the enter button it will create a folder called customerror with four files as shown in the below image.

Now open customerror.component.html file and then copy and paste the following code in it.

<h3>The page you are looking for does not exist</h3>

Next we need to create the Wildcard Route.

Creating Wildcard Route:

Open app-routing.module.ts file and then copy and paste the following code in it. As you can see the last route is the Wildcard route.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentComponent } from './student/student.component';
import { StudentdetailComponent } from './studentdetail/studentdetail.component';
import { LoginComponent } from './login/login.component';
import { CustomerrorComponent } from './customerror/customerror.component';

const routes: Routes = [
  {
    path:'', redirectTo:'Login',pathMatch:'full'
  },
  {
    path:'studentLink', component:StudentComponent
  },
  {
    path:'studentdetailsLink', component: StudentdetailComponent
  },
  {
    path:'Login', component:LoginComponent
  },
  {
    path:'**', component:CustomerrorComponent
  }

];

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

Next we need to create one invalid link.

Creating Invalid Link:

Open app.component.html file and then copy and paste the following code in it. Here, the third link is an Invalid link as we don’t have any path with the name invalidLink.

<h2>Angular Routing Example</h2>
<a [routerLink] = "['/studentLink']" >Student</a> <br/>
<a [routerLink] = "['/studentdetailsLink']" >student details</a><br/>
<a [routerLink] = "['/invalidLink']" >Invalid Link</a>
<div>
    <router-outlet></router-outlet>
</div>

Now save all the change and open the browser and click on the Invalid link and you should see the custom error message as shown in the below image.

Note: If you add the Wildcard Route as the first route in Router Configuration then no other routes will be reached as the Wildcard Route always matched. In order to understand this better, please modify the app-routing.module.ts file as shown below as you can see we have configured the Wildcard route as the first route.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentComponent } from './student/student.component';
import { StudentdetailComponent } from './studentdetail/studentdetail.component';
import { LoginComponent } from './login/login.component';
import { CustomerrorComponent } from './customerror/customerror.component';

const routes: Routes = [
  {
    path:'**', component:CustomerrorComponent
  },

  {
    path:'', redirectTo:'Login',pathMatch:'full'
  },
  {
    path:'studentLink', component:StudentComponent
  },
  {
    path:'studentdetailsLink', component: StudentdetailComponent
  },
  {
    path:'Login', component:LoginComponent
  },
];

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

Now save the change, and open the browser and click any of the links, you will always get the Custom error message.

What should be the Order of Angular Routes?

The order of the routes is very important. When matching routes find, the angular router uses first-match wins strategy. So more specific routes should be placed above less specific routes. So, Routes with a static path should be placed first, followed by the empty path route, that matches the default route. The wildcard route should be the last route in your router configuration as shown in the below image.

In the next article, I am going to discuss Child Route in Angular Application. Here, in this article, I try to explain the Wildcard Route in Angular Application with an example. I hope you enjoy this article.