In this article we learn how to setup 404 page or page not found in angular routing.  I will show you how, just follow the steps clearly.

For more updates please do Subscribe via Email:

How to setup 404 page in angular routing ?

first thing to do to setup page not fount or 404 page is to create a page component for the landing page. In the following approach, we will create a simple angular component called PagenotfoundComponent

Creating Component: Run the below command to create pagenotfound component.

ng g c pagenotfound


ng generate component pagenotfound

Noted: this will be continue for angular export excel file article.

This will the view of your CLI after running the command.

Project Structure: It will look like this.


  •  Add the below code inside HTML template of this component to display a simple 404 error message.
<div class="container">
    <img src="">

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 { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
import { ExportCustomExcelFileComponent } from './export-custom-excel-file/export-custom-excel-file.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExportExcelFileComponent } from './export-excel-file/export-excel-file.component';

const routes: Routes = [
  { path: 'exportExcelFile' , component:ExportExcelFileComponent},
  { path: 'exportCustomExcelFile' , component:ExportCustomExcelFileComponent},

   //Wild Card Route for 404 request
  { path: '**' , component:PagenotfoundComponent}

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


Here is the for PagenotfoundComponent is provided inside the route array. So now when someone tries to send a request to page that is not available in route array will be automatically redirected to Pagenotfound Component page.

  • Steps to run the application: 

Run the following command to start the application:

ng serve

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

Happy Learning..

GitHub Branch:

GitHub Link

Thank you for visiting my blog site. Hoping you learn more here. please feel free to comment and suggest if there is need to enhance and update. thank you.

Related Topics

Leave a Reply

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