How to setup 404 page in angular routing ?

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:

Table Of Contents

How to setup 404 page in angular routing ?
Implementation
Related Topics

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.

Implementation

Add the below code inside HTML template of this component to display a simple 404 error message.

<div class="container">
    <img src="https://kfg6bckb.media.zestyio.com/yalantis-interactive-404.gif">
</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 { 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}
];

@NgModule({
  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 fine. Now go to http://localhost:4200/anything, where we will get the 404 error as shown below.

Happy Learning..

GitHub Branch: https://github.com/JaveTLupango/exportExcelFile/tree/PagenotFound

GitHub Link: https ://github.com/JaveTLupango/exportExcelFile/blob/PagenotFound/src/app/app-routing.module.ts

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.