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.

Wildcard Route in Angular Application
Wildcard Route in Angular Application

Wildcard Route in Angular Application

Wildcard Route in Angular Application

login compponent

Modify app.component.html file:

Open app.component.html file and then copy and paste the following code in it.

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.

angular wildcardrouting
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.

generetae

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

components

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.

wild route

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.

routing module

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.

Source: Various

More Ino at Angular

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6198470323961966"
     crossorigin="anonymous"></script>
<!-- horizontal6 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6198470323961966"
     data-ad-slot="1560719138"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Redirecting wildcardRoutes in Angular, wildcardRoutes in Angular, Angular, Angular wildcardRoutes, Navigation in Angular, Redirecting wildcardRoutes, Angular Routing Examples, Web development, UI Development, Angular Tutorial, Angular Routing Concept

Related Posts

One thought on “Wildcard Route in Angular Application

Leave a Reply

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

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice