How to add 404 page in angular routing ?

 

How to add 404 page in angular routing ?

To add a 404 page in the angular routing, we have to first create a component to display whenever a 404 error occurred. In the following example, we will create a angular component called PagenotfoundComponent.

To create angular component use below command

ng generate component pagenotfound 

Once component is created add below code in it.

<div>

<h1>404 Error</h1>

<h1>Page Not Found</h1>

</div>

Then inside the routing file, we have to provide this component route and make this available for every 404 requests. So, inside the app-routing.module.ts file, we have to create a new route for this PagenotfoundComponent.

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { PagenotfoundComponent } from

'./pagenotfound/pagenotfound.component';

import { PostCreateComponent } from

'./posts/post-create/post-create.component';

 

const routes: Routes = [

 { path: 'create', component: PostCreateComponent },

//Wild Card Route for 404 request

{ path: '**', pathMatch: 'full',

component: PagenotfoundComponent },

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule],

providers: []

})

export class AppRoutingModule { }

Now run angular application using below command

ng serve

Now open the browser and go to http://localhost:4200, where everything is working fine. Now go to http://localhost:4200/whateveryouwant, where we will get the 404 error as shown below.