Overview Of Wildcard Routing And Path Matching In Angular

Introduction

In any Angular application, we use routing to navigate from one view to another. What happens if we don’t define a certain route and we try to navigate to that route? Well, the Angular application throws an error. So, we have to carefully define the router for navigation.

We can use wildcard routing for defining the route. With the help of wildcard, we can perform certain operations related to defining of the route for an application.

Prerequisites

• HTML, CSS, and JS
• Basics of TypeScript.
• Basic knowledge of Routes in Angular

Before we start, please go through the creation of an Angular application using routes.

Run the application and navigate to the below route.

http://localhost:4200/studentFees

You will get the error like below.

 

Let us create a new component for any incorrect route.

>ng g c not-found

Open the not-found.component.html file and add the following content.

<h2>Not found!</h2>
<p>The page you are looking for is not available.</p>

Open app-routing.module.ts and add the below code.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentMarksComponent } from './student-marks/student-marks.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes:Routes = [
    {path:'studentDetails', component : StudentDetailsComponent},
    {path: 'studentMarks', component : StudentMarksComponent},
    {path: "**", component : NotFoundComponent}
];

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

We have just added one more component - NotFoundComponent.

Open app.module.ts and make sure that NotFoundComponent is imported and added in the declaration array. Angular CLI already has done this importing of the newly added component.

Run the application and navigate to the below route.

http://localhost:4200/studentFees

You will get this View.

 

Navigate to the below route.

http://localhost:4200

 

It's still the same, because we have not configured the route for this. Let us create the StudentDetails as a display component for an empty path.

Open app-routing.module.ts and set the route's value as below.

const routes:Routes = [
    {path: '', component : StudentDetailsComponent},
    {path:'studentDetails', component : StudentDetailsComponent},
    {path: 'studentMarks', component : StudentMarksComponent},
    {path: "**", component : NotFoundComponent}
];

Run the application.

 

The NotFoundComponent is not displaying for localhost:4200 route.

Note
Always define the path in the end of the definition of the routes.

{path: "**", component : NotFoundComponent}

If we define this path having wildcard ** at the top, then it will execute first everytime and none of your routes will come in use.

redirectTo and pathMatch properties of the route

The RedirectTo property of routes is useful in defining the route when we want a particular pattern to redirect to some route. Instead of defining the route component, we simply redirect it to another route.

When we define the redirectTo property, then we have to use a pathMatch property to tell the URL how URL Segments match with the configured route. It has two values.

1. prefix: It tells the url - if the path is prefixed of the url then redirect to the given route.
2. full: It tells the url - if the full path is matched, then only redirect.

Change the route value to below.

const routes:Routes = [
    {path: '', redirectTo : '/studentDetails', pathMatch : 'prefix'},
    {path:'studentDetails', component : StudentDetailsComponent},
    {path: 'studentMarks', component : StudentMarksComponent},
    {path: "**", component : NotFoundComponent}
];

The empty string value can be the prefix of every route. So, it will show the studentDetails component everytime.

Change the route value to something like below.

const routes:Routes = [
    {path: '', redirectTo : '/studentDetails', pathMatch : 'full'},
    {path:'studentDetails', component : StudentDetailsComponent},
    {path: 'studentMarks', component : StudentMarksComponent},
    {path: "**", component : NotFoundComponent}
];

Now, if the full URL is blank, then only it will redirect to the studentDetails route.

So, the prefix value is not very useful for us but using the full match, we can achieve what we wanted.