在Angular独立组件的全局错误处理器中使用MatSnackBar

核心问题原因 #

你遇到的报错是因为全局错误处理器的依赖链未正确配置：在独立组件模式下，MatSnackBar由MatSnackBarModule提供，若未在应用配置中导入该模块，Angular无法解析MyErrorHandler中的MatSnackBar依赖。

具体解决步骤 #

1. 正确编写自定义错误处理器

确保MyErrorHandler实现ErrorHandler接口，并通过构造函数注入MatSnackBar：

// my-error-handler.ts
import { ErrorHandler, Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable()
export class MyErrorHandler implements ErrorHandler {
  constructor(private snackBar: MatSnackBar) {}

  handleError(error: unknown): void {
    // 显示错误提示
    const errorMsg = error instanceof Error ? error.message : '未知错误';
    this.snackBar.open(`错误：${errorMsg}`, '关闭', { duration: 3000 });
    // 保留默认错误日志行为
    console.error('全局错误捕获：', error);
  }
}

2. 在main.ts的应用配置中完善依赖

在bootstrapApplication的配置里，需要同时完成两件事：

• 导入MatSnackBarModule（提供MatSnackBar的依赖）
• 将MyErrorHandler配置为全局ErrorHandler的替代类

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { ErrorHandler } from '@angular/core';
import { MyErrorHandler } from './app/my-error-handler';
import { MatSnackBarModule } from '@angular/material/snack-bar';

bootstrapApplication(AppComponent, {
  imports: [
    // 导入MatSnackBarModule，确保MatSnackBar可被注入
    MatSnackBarModule,
    // 其他你的应用需要的独立组件/模块
  ],
  providers: [
    { provide: ErrorHandler, useClass: MyErrorHandler }
  ]
});

3. 注意事项

• 不要给MyErrorHandler添加providedIn: 'root'：因为我们已经在providers数组中显式配置了全局ErrorHandler，重复提供可能导致冲突。
• 确保已安装Angular Material依赖：若未安装，先执行ng add @angular/material完成初始化。

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