Create 404 page in Angular

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

You have already know how to create and setup new Angular application. Else you can check this article.

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.

Tags: