How to Create a 404 Page in Angular: Simple Guide

In Angular, create a 404 page by adding a wildcard route with path: '**' in your routing module that points to a 404 component. This route catches all unknown URLs and displays your custom 404 page.

Syntax

To create a 404 page in Angular, add a wildcard route at the end of your Routes array. This route uses path: '**' to match any URL not matched by previous routes. It should point to a component that displays the 404 message.

• path: '**': Matches all unmatched routes.
• component: Your404Component: The component to show for 404 errors.

typescript

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent } // 404 route
];

Example

This example shows a simple Angular routing setup with a 404 page. The PageNotFoundComponent displays a friendly message when the user visits an unknown URL.

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { PageNotFoundComponent } from './page-not-found.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent } // Wildcard route for 404 page
];

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

// page-not-found.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-page-not-found',
  template: `<h2>404 - Page Not Found</h2><p>Sorry, the page you are looking for does not exist.</p>`
})
export class PageNotFoundComponent { }

Output

<h2>404 - Page Not Found</h2><p>Sorry, the page you are looking for does not exist.</p>

Common Pitfalls

Common mistakes when creating a 404 page in Angular include:

• Placing the wildcard route path: '**' before other routes, causing it to catch all URLs and blocking valid routes.
• Not importing the routing module correctly in your AppModule.
• Forgetting to declare the 404 component in your module.

Always put the wildcard route last in the routes array to avoid blocking other routes.

typescript

const routesWrong: Routes = [
  { path: '**', component: PageNotFoundComponent }, // Wrong: catches all routes
  { path: 'home', component: HomeComponent }
];

const routesRight: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent } // Correct: wildcard last
];

Quick Reference

Tips for creating a 404 page in Angular:

• Use path: '**' as the last route.
• Create a simple component with a clear 404 message.
• Import and declare all components properly.
• Test by navigating to unknown URLs.

Key Takeaways

Add a wildcard route with path: '**' at the end of your routes to catch unknown URLs.

Create a dedicated 404 component to show a friendly error message.

Always place the wildcard route last to avoid blocking valid routes.

Declare and import your 404 component properly in your Angular module.

Test your 404 page by visiting URLs not defined in your routes.