Using Angular 2: Implementing Router into myExceptionHandler

Question

Using Angular 2: Implementing Router into myExceptionHandler

Within my app.module.ts, I've set up the following code:

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

Next, in my MyExceptionHandler:

import { Injectable } from "@angular/core"
import { Router } from "@angular/router"

@Injectable()
export class MyExceptionHandler {
    constructor (private _router: Router) {}

    handleError(error:any):void {
        ...
    }
}

Unfortunately, an error is popping up saying:

Error: Error: Provider parse errors

If I treat MyExceptionHandler as a normal provider, everything works smoothly. It seems like the ErrorHandler is being executed before the Router is fully instantiated. Any suggestions on how to fix this issue?

angular typescript

Answer 1

Answer №1

Here is the recommended code snippet from this Github thread:

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

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {
    private _router: Router;
    constructor(private _injector: Injector) {
        // Specify true to rethrow exceptions in Angular
        super(true);
    }

    handleError(error: any): void {
        // Delegate error handling to the default handler.
        super.handleError(error);

        if (!this._router) {
            this._router = this._injector.get(Router);
        }

        // Log the error and redirect to 500 page.
        this._router.navigate(['/errors/500']);
    }
}

Answer 2

Here is the recommended code snippet from this Github thread:

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

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {
    private _router: Router;
    constructor(private _injector: Injector) {
        // Specify true to rethrow exceptions in Angular
        super(true);
    }

    handleError(error: any): void {
        // Delegate error handling to the default handler.
        super.handleError(error);

        if (!this._router) {
            this._router = this._injector.get(Router);
        }

        // Log the error and redirect to 500 page.
        this._router.navigate(['/errors/500']);
    }
}

Using Angular 2: Implementing Router into myExceptionHandler

Answer №1

Similar questions

A different approach to showcasing components in SvelteKit based on the width of the screen

Issue with Angular: event.key doesn't register as shft+tab when pressing Shift+Tab key

Angular: display many components with a click event

Implementing onClick functionality to change background color with styled components

Encountered an issue while trying to install npm for an existing Angular 4 project

Guide to accessing a menu through Long press or Right click in Angular2

Enums are not recognized by TypeScript when used within an array

Is jest the ideal tool for testing an Angular Library?

Leveraging jest for handling glob imports in files

Child routes in Angular tabs are failing to display in the currently active tab

Expanding a component using the identical selector in Angular 2 / Angular-CLI

Developing a versatile Angular2 component that has the potential to be utilized across various sections of a website

Utilize multiple activated modules in Angular 2

What is the best way to send out Redux actions?

Launching Nest.js application from Visual Studio Code

`How to prevent Query parameters from being lost upon reloading in Nextjs Router while maintaining a clean URL structure?`

Display the date format based on the computer's settings using Angular 2

Develop a flexible axios client

Vue's computed property utilizing typed variables

Tips on transforming a JavaScript function constructor into TypeScript