Angular 6应用调试：MatSnackBar注入报错如何获取详细错误信息？

我明白这种模糊的错误提示有多让人头疼！当Angular抛出[object Object]这种没营养的错误时，通常是因为错误对象没有被正确序列化，我们可以通过几种方式挖到具体的错误信息：

1. 用浏览器调试工具捕获完整错误对象 #

打开浏览器控制台（F12），切换到Sources标签：

• 可以直接在控制台输入这段代码，全局捕获错误并触发断点：

  window.onerror = function(msg, url, line, col, error) { debugger; };
  

• 当错误触发时，调试器会自动暂停，此时在控制台输入error，就能查看完整的错误对象，包括message（错误描述）、stack（调用栈）等关键信息。

2. 自定义Angular错误处理器 #

重写默认的错误处理逻辑，强制打印完整错误详情：
首先创建一个自定义错误处理器：

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    console.error('完整错误信息:', error);
    console.error('错误调用栈:', error.stack);
    // 保留原有的错误抛出逻辑，不影响程序崩溃行为
    throw error;
  }
}

然后在你的AppModule中替换默认的错误处理器：

import { ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler';

@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ]
})
export class AppModule { }

这样错误触发时，控制台会直接输出完整的错误结构，帮你快速定位问题。

3. 手动在代码中捕获错误 #

在组件构造函数里加try-catch块，直接打印可能的错误：

constructor( 
  private formBuilder: FormBuilder, 
  private location: Location, 
  public snackBar: MatSnackBar 
) { 
  try {
    // 尝试打印实例，检查是否正常注入
    console.log('MatSnackBar实例:', snackBar);
  } catch (err) {
    console.error('构造函数错误详情:', err);
  }
}

另外，有些浏览器（比如Chrome）在控制台显示[object Object]时，你可以点击错误信息旁的展开箭头，或者右键选择「Copy object」，粘贴到控制台查看完整结构。

4. 检查Fuse模板的模块配置 #

因为你用的是Fuse骨架模板，大概率是MatSnackBarModule没有被正确导入：

• 确保在组件所在的模块中导入MatSnackBarModule：

  import { MatSnackBarModule } from '@angular/material/snack-bar';
  
  @NgModule({
    imports: [
      // 其他模块
      MatSnackBarModule
    ]
  })
  export class YourComponentModule { }
  

• 如果模板有共享模块，也要检查是否在共享模块中导入并导出了MatSnackBarModule，确保组件能正常访问到这个模块。

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