Fix NotFoundError in Angular

Angular Routing NotFoundError

Angular's router throws errors or shows blank pages when routes don't match. This commonly happens with deep links, page refreshes, and lazy-loaded modules.

Wildcard Route for 404

Without a wildcard route, unmatched URLs show a blank page:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // This MUST be last
  { path: '**', component: NotFoundComponent }
];

Server-Side 404 on Refresh

When users refresh on /about, the server looks for a file at /about/index.html and returns 404. Configure your server to serve index.html for all routes:

# Nginx
location / {
  try_files $uri $uri/ /index.html;
}

Lazy-Loaded Module Not Found

// Error: Cannot find module './admin/admin.module'
// Check the path is correct:
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  // Standalone component (Angular 15+)
  {
    path: 'settings',
    loadComponent: () => import('./settings/settings.component').then(c => c.SettingsComponent)
  }
];

Hash Location Strategy

For environments where server-side routing isn't configurable:

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ]
});

URLs become /#/about instead of /about, so the server always serves index.html.

Bugsly captures client-side navigation errors in Angular, including the attempted route and the router state at the time of failure.