Angular: 12 - Cannot access 'AppComponent' before initialization when doing "ng test"

Question

When I'm trying to run "ng test", I just getting like the below:

Error message in UI by Karma v 6.3.4:
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

Error message in terminal:
An error was thrown in 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) at Module.36747 (http://localhost:9876/karma_webpack/webpack:/src/app/app.module.ts:16:5)

App.module TS FILE:

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 { }

Is anyone knows how we can solve this?

I encountered this error when moving from 11 to 13. https://github.com/angular/components/issues/23907 — Winnemucca, Jan 20 '22 at 22:13

score 0 · Answer 1 · answered Oct 04 '21 at 09:50

0

You should try to remove the AppComponent from the providers array. That can cause the error you are encountering.

answered Oct 04 '21 at 09:50

Octavian Mărculescu

4,312
1
16
29

I've tried to do this and still having the same error. **app.module.ts:16:5**, **line 16** refers to AppComponent in the **declarations** array – Omar Jaber Oct 04 '21 at 09:56
Nonetheless, you should not put it in the providers array. That's a component, and components should be in the `declarations` array. – Octavian Mărculescu Oct 04 '21 at 09:59

score 0 · Answer 2 · answered Feb 24 '22 at 10:40

When I'm trying to run "ng test", I just getting like the below:

You have a test file ending with "spec.ts" which is mis-configured and that is causing this error. Check browser developer options and find out that meddling *spec.ts. After that you've two options:

delete that test file if you don't plan to test or
add required modules, providers, ... in your TestBed.configureTestingModule(...), so that spec.ts file is able to build successfully.

Angular: 12 - Cannot access 'AppComponent' before initialization when doing "ng test"

2 Answers2