404 Error in Angular Routing – Quick Fix Guide

In this tutorial, you will clear the concept of the 404 Error in Angular Routing and how to fix it.

What is a 404 Error in Angular?

When the Angular router cannot find a matching route for the request URL, then we get 404 error in Angular Routing.

Note: Instead of loading a component, Angular shows a Page Not Found error.

In modern Angular applications (v17+), routing is usually configured using Standalone Components and provideRouter().

When does the Angular Route Error happen?

The Error happens when

1. The route path is incorrect.
2. The router configuration is missing.
3. The server is not configured for Angular routes.
4. A wildcard route is not defined.

Common Causes of Angular 404 Errors

Angular 20+ Routing Example

Modern Angular uses Standalone Components instead of AppRoutingModule.

Step 1: Define Routes

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

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },

  // Wildcard route for 404
  { path: '**', component: PageNotFoundComponent }
];

Step 2: Configure Router in main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

Step 3: Creating a Custom 404 Page

Generate a page not found component:

ng generate component page-not-found

Put code into the HTML file

<h1>404 - Page Not Found</h1>
<p>The page you are looking for does not exist.</p>
<a routerLink="/">Go Back Home</a>

URL Routing with Wild Card Route Explanation

What is the best Practice of Angular Routing?

You can get the best practice of Angular Routing

Angular Routing Architecture (Old vs New)

Now, you can compare Angular Architecture Old vs New