Search code examples
angularerror-handling

Why is my Custom Error Handler overwritten by some other handler?

I have created a custom error handler and registered in the main.ts file via an ApplicationConfig.

export const appConfig: ApplicationConfig = {
    providers: [
        ...
        importProvidersFrom(BrowserAnimationsModule),
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
        ...
    ]
};

If I am not putting my handler after the importProvidersFrom it is overwritten by another error handler.

Why is this overwritten and by what?

Angular Dev Tools

In the Screenshot there are three handler registered on the root element. The last one is my custom error handler. Where are the other two coming from?

Injector Tree from root

nx report

 NX   Report complete - copy this into the issue template

   Node   : 18.13.0
   OS     : win32-x64
   npm    : 9.6.6

   nx (global)        : 17.1.1
   nx                 : 17.1.3
   @nx/js             : 17.1.3
   @nx/jest           : 17.1.3
   @nx/linter         : 17.1.3
   @nx/eslint         : 17.1.3
   @nx/workspace      : 17.1.3
   @nx/angular        : 17.1.3
   @nx/cypress        : 17.1.3
   @nx/devkit         : 17.1.3
   @nx/eslint-plugin  : 17.1.3
   @nrwl/tao          : 17.1.3
   @nx/web            : 17.1.3
   @nx/webpack        : 17.1.3
   typescript         : 5.2.2
   ---------------------------------------
   Community plugins:
   @progress/kendo-angular-buttons      : 14.1.0
   @progress/kendo-angular-dateinputs   : 14.1.0
   @progress/kendo-angular-dialog       : 14.1.0
   @progress/kendo-angular-dropdowns    : 14.1.0
   @progress/kendo-angular-excel-export : 14.1.0
   @progress/kendo-angular-grid         : 14.1.0
   @progress/kendo-angular-icons        : 14.1.0
   @progress/kendo-angular-indicators   : 14.1.0
   @progress/kendo-angular-inputs       : 14.1.0
   @progress/kendo-angular-l10n         : 14.1.0
   @progress/kendo-angular-label        : 14.1.0
   @progress/kendo-angular-layout       : 14.1.0
   @progress/kendo-angular-listview     : 14.1.0
   @progress/kendo-angular-navigation   : 14.1.0
   @progress/kendo-angular-notification : 14.1.0
   @progress/kendo-angular-scheduler    : 14.1.0
   @progress/kendo-angular-tooltip      : 14.1.0
Solution

  • importProvidersFrom(BrowserAnimationsModule) is pulling the BrowserModule.

    BrowserModule provides a default handler.

    If you want to use animations, you should be using provideAnimations() instead.