How can I handle routing errors in Angular?

How can I handle routing errors in Angular?

In Angular, you can handle routing errors by using the Router's error handling features. You can implement a global error handler or use route guards to manage unauthorized access.

What is a global error handler, and how do I set it up?

A global error handler in Angular is a service that implements the ErrorHandler interface. You can create a custom error handler by extending the ErrorHandler class and then provide it in your app module.

Can you show me an example of a custom error handler?

Sure! Here's a simple example:

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.error('An error occurred:', error);
    // You can also log the error to an external service
  }
}

Then, provide it in your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GlobalErrorHandler } from './global-error-handler';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

What about handling 404 errors specifically?

To handle 404 errors, you can create a wildcard route that redirects to a 'Not Found' component. For example:

const routes: Routes = [
  // other routes...
  { path: '**', component: NotFoundComponent }
];