Angular：12 - 进行“ng 测试”时，在初始化之前无法访问“AppComponent”答案

【问题标题】：Angular: 12 - Cannot access 'AppComponent' before initialization when doing "ng test"Angular：12 - 进行“ng 测试”时，在初始化之前无法访问“AppComponent”
【发布时间】：2021-11-24 18:12:02
【问题描述】：

当我尝试运行“ng test”时，我会得到如下结果：

Karma v 6.3.4 的 UI 中出现错误消息：
0 规范，0 失败，随机种子 98146 加载期间错误：未捕获的 ReferenceError：在 http://localhost:9876/karma_webpack/main.js 第 125 行初始化之前无法访问“AppComponent”

终端中的错误消息：
afterAll Uncaught ReferenceError: Cannot access 'AppComponent' before initialization ReferenceError: Cannot access 'AppComponent' before initialization at Module.AppComponent (http://localhost:9876/karma_webpack/main.js:125:61) 在 Module.36747 (http://localhost:9876/karma_webpack/webpack:/src/app/app.module.ts: 16:5)

App.module TS 文件：

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpConfigInterceptor } from './auth/httpconfig.interceptor';
import { HeaderModule } from './shared/header/header.module';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.serviceWorker, registrationStrategy: 'registerImmediately' }),
    NgxUiLoaderModule,
    MatSnackBarModule,
    HttpClientModule,
    HeaderModule
  ],
  providers: [
    AppComponent,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpConfigInterceptor,
      multi: true
    }
  ],
  exports: [
    RouterModule
  ],
  bootstrap: [AppComponent]

})
export class AppModule { }

有谁知道我们如何解决这个问题？

【问题讨论】：

我从 11 移动到 13 时遇到了这个错误。github.com/angular/components/issues/23907

标签： angular typescript unit-testing karma-jasmine angular-test

【解决方案1】：

您应该尝试从providers 数组中删除AppComponent。这可能会导致您遇到的错误。

【讨论】：

我试过这样做，但仍然有同样的错误。 app.module.ts:16:5，第16行引用declarations数组中的AppComponent
尽管如此，你不应该把它放在 providers 数组中。那是一个组件，组件应该在declarations数组中。

【解决方案2】：

当我尝试运行“ng test”时，我会得到如下结果：

您有一个以“spec.ts”结尾的测试文件，该文件配置错误并导致此错误。检查浏览器开发人员选项并找出干预*spec.ts。之后你有两个选择：

如果您不打算测试，请删除该测试文件或
在您的TestBed.configureTestingModule(...) 中添加所需的modules、providers、...，以便spec.ts 文件能够成功构建。

【讨论】：