? Angular Wildcard Route

⚡ Quick Overview

In Angular, a wildcard route is used to catch all undefined URLs and redirect users to a 404 page or a fallback component. This keeps your SPA user-friendly by handling invalid URLs gracefully instead of leaving users on a blank or broken page.

? Key Concepts

Wildcard Pattern '**' matches any URL that doesn’t match a defined route.
The wildcard route is typically mapped to a PageNotFoundComponent or a redirect.
It must always be placed at the end of the routes array.
Prevents confusing user experiences when users type incorrect URLs or old bookmarks.
Can show a custom 404 page or automatically redirect the user to a safe default route.

? Syntax & Route Definition

A wildcard route is defined inside the Angular Routes array using the path '**'. It is usually combined with either a component or a redirect configuration.

? View Code Example – Wildcard Route in app-routing.module.ts

// App routing module with wildcard route for 404 handling
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Default home route
  { path: '**', component: PageNotFoundComponent } // Wildcard route for unknown URLs
];

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

? Creating a 404 Component

The wildcard route usually points to a simple, user-friendly 404 component. This component can display a message and optional navigation links back to the main parts of your app.

? View Code Example – Basic 404 Component

// Simple Angular component used for the 404 Page Not Found screen
import { Component } from '@angular/core';

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

? Alternative: Redirect Wildcard to a Safe Route

Instead of showing a separate 404 page, you can also redirect all unknown URLs back to a safe default route such as / (home) or /dashboard.

? View Code Example – Wildcard Redirect

// Wildcard route that redirects unknown URLs to the home route
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '', pathMatch: 'full' } // Redirect all invalid paths to home
];

? Explanation & Live Output

What Happens at Runtime?

Angular checks each defined route in order when the user navigates to a URL.
If none of the specific routes match, the wildcard route with path '**' will match.
If the wildcard is mapped to PageNotFoundComponent, the user sees a clear “404 - Page Not Found” message instead of a blank screen.
If the wildcard uses redirectTo, Angular internally redirects the user to the specified route (for example, the home page).
Because the wildcard matches “anything”, it must appear last in the array; otherwise it would consume every route and your valid routes would never be reached.

✅ Tips & Best Practices

Always place the wildcard route as the last entry in the routes array.
Provide a friendly, branded 404 page to help users recover from navigation mistakes.
Include a clear call-to-action such as “Go Back Home” or “View Dashboard”.
Decide whether you want a dedicated 404 screen (component) or a seamless fallback (using redirectTo).
Log 404 hits if needed to understand broken links or outdated bookmarks in your app.

? Try It Yourself / Practice Tasks

Create a custom PageNotFoundComponent that includes a “Back to Home” button.
Style your 404 page with your app’s branding (logo, colors, and helpful message).
Configure the wildcard route to use redirectTo and test how it behaves compared to the component approach.
Manually type invalid URLs (like /random, /this/does/not/exist) in the browser and confirm that the wildcard route is triggered.
Add an additional valid route (for example, /about) and verify that it still works correctly when defined before the wildcard.