Angular单元测试报错：Cannot access 'CompanyDetailsComponent' before initialization

问题 #

我正在为CompanyDetailsComponent编写单元测试，测试代码如下：

describe('CompanyDetails', () => {
let fixture: ComponentFixture<CompanyDetailsComponent>;
let component: CompanyDetailsComponent;

beforeEach(() => {

    TestBed.configureTestingModule({
        declarations: [CompanyDetailsComponent],
        imports: [AppUiModule, getTranslocoModule(), RouterTestingModule.withRoutes([])],
        providers: [],
    });
});

beforeEach(() => {
    fixture = TestBed.createComponent(CompanyDetailsComponent);
    component = fixture.componentInstance;
});

});

为简化排查，我已移除所有providers，但仍出现如下报错：

An error was thrown in afterAll
Uncaught ReferenceError: Cannot access 'CompanyDetailsComponent' before initialization
ReferenceError: Cannot access 'CompanyDetailsComponent' before initialization
  at Module.CompanyDetailsComponent (http://localhost:9876/_karma_webpack_/main.js:689:72)
  at Module.15819 (http://localhost:9876/_karma_webpack_/webpack:/src/app/broker-journey/broker-journey-routing.module.ts:39:16)
  at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
  at Module.94517 (http://localhost:9876/_karma_webpack_/main.js:3608:106)
  at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
  at Module.67221 (http://localhost:9876/_karma_webpack_/main.js:709:140)
  at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
  at Module.420 (http://localhost:9876/_karma_webpack_/main.js:655:84)
  at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
  at webpackContext (http://localhost:9876/_karma_webpack_/webpack:/src|sync|/company-details.component/.spec/.ts$:9:1)

将该组件替换为项目中其他组件时测试可正常运行，请问该如何解决？

• 排查循环依赖问题
  报错栈指向broker-journey-routing.module.ts，说明CompanyDetailsComponent和该路由模块极可能存在循环引用。检查组件文件的导入语句，移除对路由模块或其关联模块/服务的不必要导入；同时确认路由模块中是否仅导入组件，没有反向被组件引用的情况。

• 调整测试中的组件导入时机
  尝试在测试的beforeEach中动态导入组件，规避初始化顺序冲突：

  describe('CompanyDetails', () => {
    let fixture: ComponentFixture<any>;
    let component: any;
  
    beforeEach(async () => {
      // 动态导入组件
      const { CompanyDetailsComponent } = await import('./company-details.component');
      await TestBed.configureTestingModule({
        declarations: [CompanyDetailsComponent],
        imports: [AppUiModule, getTranslocoModule(), RouterTestingModule.withRoutes([])],
      }).compileComponents();
  
      fixture = TestBed.createComponent(CompanyDetailsComponent);
      component = fixture.componentInstance;
    });
  });
  

• 验证组件的声明与导出
  确认CompanyDetailsComponent在所属模块中正确声明，若需跨模块使用则需确保已导出；同时检查组件文件本身是否存在语法错误（比如未闭合的类定义、变量声明问题）。

• 清理缓存重新构建
  执行ng test --no-cache命令，清理Karma和Webpack的编译缓存，避免旧缓存导致的初始化异常。

内容的提问来源于stack exchange，提问作者Fazla Elahi Md Jubayer