404 Error in Angular Routing – Quick Fix Guide

Introduction

The 404 Error is one of the most common routing issues encountered in Angular applications. It usually occurs when users navigate to a URL that doesn’t match any configured route.

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

Cause Description
Undefined Route The route is not defined in the routes configuration.
Incorrect URL The URL does not match any route path.
Missing Wildcard Route No fallback route for unknown URLs.
Server Configuration The server does not redirect requests to index.html.
Lazy Loading Issues Lazy-loaded routes are configured incorrectly.

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

URL Matched Route Component
/ Home Route HomeComponent
/about About Route AboutComponent
/contact Wildcard Route PageNotFoundComponent

What is the best Practice of Angular Routing?

You can get the best practice of Angular Routing

Best Practice Benefit
Use Wildcard Route ** Handles unknown URLs
Create Custom 404 Page Better user experience
Use Standalone Routing Modern Angular architecture
Configure Server Redirect Prevent refresh errors

Angular Routing Architecture (Old vs New)

Now, you can compare the Angular Architecture Old vs New

Feature Old Angular Angular 17–20+
Routing Setup AppRoutingModule provideRouter()
Architecture NgModules Standalone Components
Configuration Multiple files Simplified
Performance Normal Optimized

Conclusion

The 404 Error in Angular Routing is typically caused by incorrect route configurations, invalid navigation paths, missing fallback routes, or improper server settings after deployment.

Following Angular routing best practices, testing navigation thoroughly, and configuring your deployment environment correctly will help prevent these issues in future projects.

Related Angular Error Fixes