ng test command crashed due to Karma webpack couldn't resolve the CoreModule.

Vesrions used:

“@angular/core”: “^12.2.15”, “@angular-devkit/build-angular”: “~12.2.15”,

“karma”: “~6.3.4”, “karma-chrome-launcher”: “~3.1.0”, “karma-cli”: “~2.0.0”, “karma-coverage-istanbul-reporter”: “~3.0.2”, “karma-jasmine”: “~4.0.0”, “karma-jasmine-html-reporter”: “^1.6.0”, “karma-junit-reporter”: “^1.2.0”,

The following error message appears only after running ng test :

 An error was thrown in afterAll
  Uncaught TypeError: Cannot read properties of undefined (reading 'CoreModule')
  TypeError: Cannot read properties of undefined (reading 'CoreModule')
      at Module.CoreModule (http://localhost:9876/_karma_webpack_/main.js:4105:108)
      at Module.3467 (http://localhost:9876/_karma_webpack_/webpack:/src/app/home/home.module.ts:17:5)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.36747 (http://localhost:9876/_karma_webpack_/main.js:271:75)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.82182 (http://localhost:9876/_karma_webpack_/main.js:15425:73)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.44466 (http://localhost:9876/_karma_webpack_/main.js:17638:83)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.40294 (http://localhost:9876/_karma_webpack_/main.js:3226:83)

I have the following files structure :

 ->src/app/core/
              -> index.ts
              -> core.module.ts
              -> ..
->src/app/folder/
              -> module.ts

I’m trying to import CoreModule from src/app/core/index which includes export * from './core.module'; inside src/app/folder/module.ts using import { CoreModule } from '@app/core';

However it seems src/app/core/index.ts file fails to export CoreModule.

src/app/core/core.module.ts :

@NgModule({
  imports: [CommonModule, HttpClientModule, TranslateModule, RouterModule, SharedModule, TourMatMenuModule],
  providers: [
    {
      provide: HttpClient,
      useClass: HttpService,
    },
    {
      provide: RouteReuseStrategy,
      useClass: RouteReusableStrategy,
    },
    ApiService,
  ],
  declarations: [ComponentA, ComponentB],
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    // Import guard
    if (parentModule) {
      throw new Error(`${parentModule} has already been loaded. Import Core module in the AppModule only.`);
    }
  }
}

[devoto13]

This exactly means that you have a circular dependency, CoreModule attempts to access X to initialize, but X, in turn, attempts to access CoreModule, which can not proceed and throws.

[Waseem-Isaac]

I’m declaring a pipe which is importing some class from app.module.ts file. This pipe is declared inside a module which in turn is imported into CoreModule, And this was the problem.

But I still can’t realise what makes the test code detect it and crash .but not the production code 😃)