How to Setup 404 Page in Angular 12

  5613 views   6 months ago AngularJS

In this article, we will create 404 error page which will display when user access non-available route.

We have started tutorial after fresh Angular Project. We create seperate component for 404 error page which will display incase user access non route link. To create a new component, run the following ng command.

ng generate component page-not-found

This command will create new component folder page-not-found in src/app folder. The folder includes page-not-found.component.ts, page-not-found.component.html and page-not-found.component.css file.

In page-not-found.component.html file, input the the HTML code which you want to display in 404 error page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page not found</title>
</head>
<body>
    <h1>Error 404</h1>
    <p>The page you are looking for is not found.</p>
</body>
</html>

If your page has css code, put it in page-not-found.component.css file. The css in this file will only apply to this component only.

Now look at the page-not-found.component.ts file. This component has export class PageNotFoundComponent. Just before above, defined @Component decorator which provides metac data for the class. The selector property is the tag in parent component where the current component will load the HTML code. 

The src/app/app.component.html file should have <router-outlet> tag where the current component will load its HTML template. So check the file should contain following tag.

<router-outlet></router-outlet>

The main html file located at src/index.html is main html file where Angular application loads in between <app-root></app-root> tag. So change the file with following one:

<base href="/">
<app-root></app-root>

Now Its time to setup routing. You generally have already have enabled routing when creating Angular application. Else you can create routing module with following command. 

ng generate module app-routing --flat --module=app

This will create app-routing.module.ts file in the src/app folder. Now in this file, import PageNotFoundComponent component at the top of the file and put two new routes at the end of routes array.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { PageNotFoundComponent } from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  // all your other routes should come first
  { path: 'page-not-found', component: PageNotFoundComponent },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

Now run the following command in Terminal to start the application.

ng serve --open

This will open application in default browser. Now try to access /page-not-found or any non defined route, example http://localhost:4200/page-not-found.

This will render 404 error page.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]