karma builder: component imported through a barrel is undefined in TestBed when another spec has an async test (cross-chunk lazy init, karma counterpart of #33728)

[fabiofigrod]

Which @angular/* package(s) are the source of the bug?

build

Is this a regression?

No

Description

With the @angular/build:karma builder (esbuild), a standalone component imported through a barrel (export * from './x') can be undefined inside another component's imports: [...]. TestBed then throws Cannot read properties of undefined (reading 'ɵcmp'). Whether it fails depends only on which other spec files are part of the same test bundle. The full suite of a project can pass while a subset (--include) fails, or the other way around.

This looks like the karma counterpart of #33728. The mechanism is the same: shared chunks, lazy __esm initialisers, and a spec with an async test plus zone.js. #33729 fixed that one by setting disableCodeSplitting for the Vitest runner of @angular/build:unit-test. src/builders/karma/application_builder.ts on main still bundles with code splitting enabled, so the karma builder is still affected.

What happens in the emitted bundle:

1. A spec that contains an async test callback is emitted as CommonJS (var require_x_spec = __commonJS({...}); export default require_x_spec();). Everything it imports becomes a lazy __esm initialiser. Here that includes the component behind the barrel (init_form_layout_component()).
2. The barrel module (index.ts, just export *) is placed in its own chunk. That chunk is what calls init_form_layout_component().
3. The chunk with the consuming component (DialogComponent, shared by two specs) imports the component's chunk directly, but not the barrel's chunk. It never calls the initialiser itself.
4. The spec entry imports the consumer's chunk before the barrel's chunk. The consumer's @Component({ imports: [FormLayoutComponent] }) decorator is evaluated while FormLayoutComponent is still undefined. The array literal keeps that undefined for good, even though the binding becomes defined a moment later.

Trigger conditions, each toggled on its own in the reproduction below:

Condition	Without it
Another spec in the bundle has an async test and imports the component directly	removing async from b/other.spec.ts: 4/4 pass
The consumer imports the component through a barrel	importing from ../layout/form-layout.component: passes (the consumer then calls the initialiser itself)
The consumer is shared by ≥ 2 specs and the barrel by ≥ 3, so they land in different chunks	with a single consumer spec, everything is inlined and passes

Minimal Reproduction

Eight small files, run with ng test --watch=false:

angular.json (test target only)

{
  "version": 1,
  "projects": {
    "repro": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "test": {
          "builder": "@angular/build:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "browsers": "ChromeHeadless"
          }
        }
      }
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "strict": true, "skipLibCheck": true, "isolatedModules": true,
    "experimentalDecorators": true, "importHelpers": true,
    "target": "ES2022", "module": "preserve"
  }
}

tsconfig.spec.json extends it with "types": ["jasmine"] and "include": ["src/**/*.ts"].

src/app/layout/form-layout.component.ts

import { Component } from '@angular/core';

@Component({ selector: 'app-form-layout', template: '<ng-content />' })
export class FormLayoutComponent {}

src/app/layout/index.ts

export * from './form-layout.component';

src/app/a/dialog.component.ts

import { Component } from '@angular/core';
import { FormLayoutComponent } from '../layout';

@Component({
  selector: 'app-dialog',
  imports: [FormLayoutComponent],
  template: '<app-form-layout>dialog</app-form-layout>',
})
export class DialogComponent {}

src/app/a/dialog.component.spec.ts and src/app/a/dialog-again.spec.ts (identical, two consumers of DialogComponent)

import { TestBed } from '@angular/core/testing';
import { DialogComponent } from './dialog.component';

describe('DialogComponent', () => {
  it('creates', () => {
    TestBed.configureTestingModule({ imports: [DialogComponent] });
    expect(TestBed.createComponent(DialogComponent).componentInstance).toBeTruthy();
  });
});

src/app/c/page.component.ts (a third importer of the barrel) and its spec

import { Component } from '@angular/core';
import { FormLayoutComponent } from '../layout';

@Component({
  selector: 'app-page',
  imports: [FormLayoutComponent],
  template: '<app-form-layout>page</app-form-layout>',
})
export class PageComponent {}

import { TestBed } from '@angular/core/testing';
import { PageComponent } from './page.component';

describe('PageComponent', () => {
  it('creates', () => {
    TestBed.configureTestingModule({ imports: [PageComponent] });
    expect(TestBed.createComponent(PageComponent).componentInstance).toBeTruthy();
  });
});

src/app/b/other.spec.ts (the only spec with an async test; it imports the component directly)

import { TestBed } from '@angular/core/testing';
import { FormLayoutComponent } from '../layout/form-layout.component';

describe('Other (has an async test)', () => {
  it('creates the layout', async () => {
    TestBed.configureTestingModule({ imports: [FormLayoutComponent] });
    await Promise.resolve();
    expect(TestBed.createComponent(FormLayoutComponent).componentInstance).toBeTruthy();
  });
});

Result: TOTAL: 2 FAILED, 2 SUCCESS. Both DialogComponent specs fail with the error below. Removing async (and the await) from other.spec.ts gives TOTAL: 4 SUCCESS.

Exception or Error

TypeError: Cannot read properties of undefined (reading 'ɵcmp')
    at getComponentDef2
    at isStandaloneComponent
    at queueTypesFromModulesArrayRecur
    at TestBedCompiler.queueTypesFromModulesArray
    at TestBedCompiler.configureTestingModule
    at _TestBedImpl.configureTestingModule

Your Environment

Angular CLI: 20.3.32
Node: 24.12.0
Package Manager: npm 11.6.2
OS: darwin arm64

Angular: 20.3.16
@angular/build 20.3.16 (esbuild 0.25.9)
typescript 5.8.3
zone.js 0.15.1

Anything else relevant?

• I reproduced it on 20.3.16. I haven't run it on 22.x, but on main the karma builder still doesn't set disableCodeSplitting (only unit-test/runners/vitest/build-options.ts does since fix(@angular/build): disable code splitting for unit test builds #33729). The code path looks unchanged.
• In a real project this showed up as 3–5 component specs failing only when --include mixed two folders, while the full suite passed. Which spec happened to call the initialiser first decided the outcome.
• Applying the same disableCodeSplitting: true to the karma application build seems like the natural fix, as fix(@angular/build): disable code splitting for unit test builds #33729 did for Vitest.