Skip to main content

Angular Routing

The Angular router is the standardized way of navigating between pages within an Angular application.

ExtraOptions is used to provide extra configuration to your router.

Displaying 404 Not Found Error Pagesโ€‹

The recommended way of handling this is to have a wildcard route listed on your routes that will handle all Page Not Found errors.

const routes: Routes = [
{ path: '/', component: HomePageComponent },
{ path: '**', component: PageNotFoundComponent },
];

For other routing errors, the errorHandler attribute on ExtraOptions can be used (see: Handling Routing Errors)

Handling Routing Errorsโ€‹

When handling routing errors other than a 404 page (which should be handled as described above), use errorHandler. In the documentation, this is described as an instance of @angular/core ErrorHandler, but this should actually be an instance of @angular/router ErrorHandler. In short, this is a function of signature (error: any): any, not an ErrorHandler class object. This also means that you donโ€™t have access to dependency injection, which makes handling errors here โ€” short of logging them to a system like Sentry or Honeybadger โ€” challenging.

Referencesโ€‹