Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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)

Abierto
  • ¿Algo no está bien?
#34,250 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
angular, typescript
Área
build-system, testing-qa

Línea de trabajo

Start with src/builders/karma/application_builder.ts and compare its build options with the Vitest configuration changed by #33729. Run the eight-file reproduction with ng test --watch=false, then verify the Karma bundle no longer produces undefined barrel imports when an async spec is present and the suite passes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

area: @angular/build
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 #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 #33729 did for Vitest.
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
1 d 46 min
PR fusionados (30 d)
160

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/angular-cli

Todos los issues de angular/angular-cli

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.