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>
<html>
<head>
    <meta charset="utf-8">
    <title>How To Setup 404 Page In Angular 12 - Websolutionstuff</title>
</head>
<body>
    <h1>Error 404</h1>
    <p>Page Not Found</p>
</body>
</html>

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 },  
];
@NgModule({
    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.

http://localhost:4200

 


You might also like :

Recommended Post
Featured Post
Paginate Method Example in Laravel 8
Paginate Method Example in Lar...

In this post i will share you information about paginate method example in laravel 8. As we know laravel provide many...

Read More

Jun-28-2021

Adding Bootstrap 5 To Angular 15: Step-by-Step Guide
Adding Bootstrap 5 To Angular...

Welcome to my comprehensive step-by-step guide on integrating Bootstrap 5 into Angular 15. As a developer, I understand...

Read More

Jun-12-2023

Advanced Custom Error Handling and Logging Strategies in Laravel 11
Advanced Custom Error Handling...

Hello, laravel web developers! In this guide, I’ll walk you through setting up advanced error handling and logging...

Read More

Oct-04-2024

Copy To Clipboard JQuery
Copy To Clipboard JQuery

In this article, we will see how to copy to clipboard jQuery. we will learn how to copy text from textarea&nbs...

Read More

Aug-19-2020