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 Socialite Login With Twitter Account
Laravel 9 Socialite Login With...

In this article, we will see laravel 9 socialite login with twitter account. Many websites provide different t...

Read More


How To Install Yajra Datatable In Laravel 10
How To Install Yajra Datatable...

In this article, we will see how to install datatable in laravel 10. Here, we will learn about the laravel 10 yajra data...

Read More


How To Add Datepicker In Angular 15 Material
How To Add Datepicker In Angul...

In this tutorial, I will guide you through the process of adding a datepicker component to your Angular 15 application u...

Read More


Laravel 10 Delete Multiple Records Using Checkbox
Laravel 10 Delete Multiple Rec...

In this article, we will see laravel 10 delete multiple records using the checkbox. Here, we will learn about how to del...

Read More