title: Angular: 12 - Cannot access 'AppComponent' before initialization when doing "ng test"
body: <p>When I'm trying to run &quot;ng test&quot;, I just getting like the below:</p>
  <p><strong>Error message in UI by Karma v 6.3.4</strong>:<br />
  0 specs, 0 failures, randomized with seed 98146 Error during loading: Uncaught ReferenceError: Cannot access 'AppComponent' before initialization in http://localhost:9876/karma_webpack/main.js line 125</p>
  <p><strong>Error message in terminal</strong>:<br />
  An error was thrown in afterAll Uncaught ReferenceError: <strong>Cannot access 'AppComponent' before initialization</strong> ReferenceError: Cannot access 'AppComponent' before initialization at Module.AppComponent (http://localhost:9876/<em>karma_webpack</em>/main.js:125:61) at Module.36747 (http://localhost:9876/<em>karma_webpack</em>/webpack:/src/app/<strong>app.module.ts:16:5</strong>)</p>
  <p><strong>App.module TS FILE</strong>:</p>
  <pre><code>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 { }
  </code></pre>
  <p>Is anyone knows how we can solve this?</p>