How To Setup 404 Page In Angular 12

Websolutionstuff | May-11-2022 | Categories : Angular

In this article, we will see how to set up a 404 page in angular 12.  To set up a 404 page in the angular routing, we have to first create a component to display whenever a 404 error occurred. we will create a 404 error page that will display when users access a non-available route.

So, let's see the angular 12 404 page, how to set up 404 page in angular routing, how to handle 404 error in angular 11/12/13, the angular 404 page template, angular 404 error on refresh, and angular 404 page routing, how to set up a 404 page in angular 11/12/13.

First, we will create an angular component page_not_found using the below command.

ng generate component page_not_found

This command will create a new component folder page_not_found src/app folder.



The folder includes page_not_found.component.tspage_not_found.html and page_not_found.component.css file.

In page_not_found.component.html file, input the HTML code which you want to display on the 404 error page.

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>How To Setup 404 Page In Angular 12 - Websolutionstuff</title>
    <h1>Error 404</h1>
    <p>Page Not Found</p>

If your page has the CSS code, put it in page_not_found.component.css the file. The CSS in this file will only apply to this component only.

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 { DashboardComponent } from './dashboard/dashboard.component';
import { PageNotFoundComponent } from './page_not_found/page_not_found.component';
const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'dashboard', component: DashboardComponent },
    // Route for 404 request
    { path: 'page_not_found', component: PageNotFoundComponent },
    { path: '**', component: PageNotFoundComponent },  
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
export class AppRoutingModule { }

We have used the wildcard route for the 404 error page. We have to add these routes only at the end of the routes array. Angular routing uses the first-match route while checking wildcard in routes.



Now, we will run the server.

ng serve

Open the URL on the browser and try http://localhost:4200/page-not-found or any other routes which will not define in the route.



You might also like :

Recommended Post
Featured Post
Laravel 9 React JS CRUD Operation Example
Laravel 9 React JS CRUD Operat...

This article will show the laravel 9 react js crud operation example. Here, we will learn how to create crud operation i...

Read More


How to Create Login and Register in Node.js
How to Create Login and Regist...

As I embarked on my journey to develop a powerful web application, I realized the importance of a robust user authentica...

Read More


How To Create Dynamic Bar Chart In Laravel 9
How To Create Dynamic Bar Char...

In this article, we will see how to create a dynamic bar chart in laravel 9. Bar charts are used to represent...

Read More


Two Way Data Binding In Angular 12
Two Way Data Binding In Angula...

In this article, we will see how two-way data binding in angular 12. When you create a variable or property to data...

Read More