Angular 12执行ng test时出现Cannot access 'AppComponent' before initialization报错如何解决

问题根因 #

错误的核心是你把AppComponent错误加入了AppModule的providers数组中。Angular组件仅需要在declarations数组声明、bootstrap数组配置启动即可，无需注册为可注入provider，这一错误配置导致了webpack打包的初始化顺序混乱，引发了初始化前访问的引用错误。

解决步骤 #

• 打开你的app.module.ts文件，找到providers配置段
• 删除providers数组里的AppComponent条目，修改后的providers配置如下：

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: HttpConfigInterceptor,
    multi: true
  }
],

• 保存文件后重新执行ng test命令即可正常运行测试。

额外校验说明 #

如果修改后仍有报错，可按以下顺序排查：

1. 清除缓存重新运行：执行ng test --no-cache跳过缓存启动测试
2. 检查AppComponent对应的测试文件app.component.spec.ts是否存在语法错误、依赖注入配置缺失问题
3. 确认你没有在其他文件中直接导入AppModule到组件的依赖注入配置中

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