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.

Read Also: Angular 13 Crop Image Before Upload With Preview

The folder includes page_not_found.component.ts, page_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.

Read Also: How To Install Angular In Ubuntu

Now, we will run the server.