Angular全局错误处理器用providedIn: 'root'无效，NgModule providers正常？

当你仅通过providedIn: 'root'注册GlobalErrorHandlerService时，Angular只会将该服务本身注册为根级提供者，但不会自动把它关联到内置的ErrorHandler令牌上。默认的ErrorHandler依然会被使用，所以你的handleError方法不会触发。

解决方法 #

方法一：在@Injectable中直接关联ErrorHandler令牌（Angular 14+）

在你的错误处理服务中，通过@Injectable的元数据直接指定provide和useClass，让Angular用你的服务替换默认的ErrorHandler：

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

@Injectable({
  providedIn: 'root',
  provide: ErrorHandler,
  useClass: GlobalErrorHandlerService
})
export class GlobalErrorHandlerService implements ErrorHandler {
  handleError(error: unknown): void {
    // 自定义错误处理逻辑
    console.error('全局错误捕获:', error);
    // 比如弹窗提示、上报错误等
  }
}

配置完成后，不需要在app.module.ts的providers数组中添加任何内容，Angular会自动使用你的服务处理全局错误。

方法二：保留providedIn: 'root'，在NgModule中添加令牌映射

如果你的Angular版本低于14，或者更倾向于在模块中管理提供者，可以保留服务的providedIn: 'root'配置，同时在app.module.ts中添加ErrorHandler的映射：

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

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

这种方式下，providedIn: 'root'确保服务是单例的，而providers数组中的配置告诉Angular：当需要ErrorHandler时，使用你的GlobalErrorHandlerService实例。

核心原因 #

Angular的全局错误处理依赖于ErrorHandler这个内置注入令牌。无论你用哪种方式注册服务，都必须显式建立ErrorHandler到你的自定义服务的映射关系，Angular才会用你的服务替代默认实现。仅设置providedIn: 'root'只是注册了服务本身，并没有完成这个关键的映射。

内容的提问来源于stack exchange，提问作者pixel