Angular Redirecting and Wildcard Routes

Angular Redirecting and Wildcard Routes

So, far we have learned about how to configure the routes for the application so, we can navigate the users in different component views. But there are continually learning about the routes because after knowing how to set up the routes in the project, the topic that we are going to learn is even more important than what we have learned in the Angular Routes tutorial.

Let’s assume, what happens if there is no component exists and if someone gives the invalid URL request then we will get an error. Or what happens if we would like to display the default page as a home page. For to handle these issues, we have something that Angular provides like Redirecting and Wildcard Routes features.

Let’s look at the example of code. Let's say you type the wrong URL type: http://localhost:4200/Something. We will see the following error in the browser console.

 
    core.mjs:6494 
   ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'Something'
Error: Cannot match any routes. URL Segment: 'Something'
    at ApplyRedirects.noMatchError (router.mjs:2939:16)
    at router.mjs:2921:28
    at catchError.js:10:38
    at OperatorSubscriber._error (OperatorSubscriber.js:23:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at resolvePromise (zone.js:1211:1)
    at resolvePromise (zone.js:1165:1)
    at zone.js:1278:1
    at _ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25595:1)
    at _ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:585:1)

Let's fix this error. For that, we need to add some lines of code to the app-routing.module.ts file. We have a setup to handle both kinds of errors like invalid URL requests and redirect the specific component as a default page.

//app-routing.module.ts
    
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DepartmentComponent } from './departmentComponent/department.component';
import { ErrorComponent } from './error.component';
import { InventoryComponent } from './inventoryComponent/inventory.component';

const routes: Routes = [
  {path: "", redirectTo: "/inventory", pathMatch:"full"},
  {path : "department", component: DepartmentComponent},
  {path : "inventory", component: InventoryComponent},
  {path : "**", component: ErrorComponent} //wildcard must be placed in last
];

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

//Bundle up all the rounting within an Array so, app.module.ts can use it
export const rountingComponents = [
  DepartmentComponent,
  InventoryComponent
]; 

Important note: The wildcard must be placed last in order because the program always looks from top to bottom of an array list. If we placed the wildcard at the top or somewhere than the last line, we will get an error component most of the time.