Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

`TestBed.overrideComponent` breaks module imports with `@angular/build:unit-test`

Offen
#33,064 6 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
52/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
angular, typescript

Rechercherichtung

Beginne damit, die Reproduktion in app.spec.ts mit beiden @angular/build:unit-test-Runner-Konfigurationen in angular.json auszuführen, und vergleiche sie anschließend mit @angular-devkit/build-angular:karma. Verfolge, wie sich TestBed.overrideComponent(App, {}) auf das importierte TestModule auswirkt, und überprüfe den Fix mit dem bereitgestellten Test in beiden Runnern; der Test sollte test-component erkennen und App erfolgreich erstellen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

angular/build:unit-test area: @angular/build
Command

test

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

Reopening from https://github.com/angular/angular/issues/68363 as I don't feel it was fully answered and I later found the issue is related to the new builder.

When using the @angular/build:unit-test builder, TestBed.overrideComponent breaks imports out of modules. This happens for both vitest and karma runners, so I would assume it is connected to the build, not the test execution.

The issue does not occur when using other builder like @angular-devkit/build-angular:karma

Minimal Reproduction

Plain Angular project + packages needed for running karma

// app.spec.ts
import { Component, NgModule } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Component({
  selector: 'test-component',
  template: '',
})
export class TestComponent {}

@NgModule({
  imports: [TestComponent],
  exports: [TestComponent],
})
export class TestModule {}

@Component({
  selector: 'app-root',
  imports: [TestModule],
  template: ` <test-component></test-component> `,
})
export class App {}

describe('App', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [App],
    })
      .overrideComponent(App, {}) // <= problematic call
      .compileComponents();
  });

  it('should create', () => {
    expect(TestBed.createComponent(App)).toBeTruthy();
  });
});
// angular.json
...
// fails
"test-vitest": {
  "builder": "@angular/build:unit-test",
  "options": {
    "runner": "vitest"
  }
},
// fails
"test-karma": {
  "builder": "@angular/build:unit-test",
  "options": {
    "runner": "karma"
  }
},
// this one works
"test-karma-devkit": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "tsConfig": "./tsconfig.spec.json"
  }
}
...

Running the test with @angular/build:unit-test it fails for both runners with

Error: NG0304: 'test-component' is not a known element (used in the '_App' component template):
1. If 'test-component' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'test-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
 ❯ validateElementIsKnown ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element_validation.ts:116:14
 ❯ validateElementIsKnown ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element.ts:151:4
 ❯ initializeElement ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element.ts:127:2
 ❯ ɵɵelementStart ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element.ts:218:2
 ❯ _App_Template ng:/_App.js:6:21
 ❯ templateFn ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/shared.ts:109:4
 ❯ executeTemplate ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:107:6
 ❯ renderView ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:47:4
 ❯ renderComponent ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:160:4
 ❯ renderChildComponents ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:140:6

With the @angular-devkit/build-angular:karma it passes as expected.

Also actually overriding something in TestBed.overrideComponent doesn't change the behaviour. I originally discovered this with a test that needs to stub a component. I left it out for simplicity here.

Exception or Error

Your Environment
_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI       : 21.2.8
Angular           : 21.2.10
Node.js           : 24.15.0
Package Manager   : npm 10.9.4
Operating System  : win32 x64

┌───────────────────────────────┬───────────────────┬───────────────────┐
│ Package                       │ Installed Version │ Requested Version │
├───────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/build-angular │ 21.2.8            │ ^21.2.8           │
│ @angular/build                │ 21.2.8            │ ^21.2.7           │
│ @angular/cli                  │ 21.2.8            │ ^21.2.7           │
│ @angular/common               │ 21.2.10           │ ^21.2.0           │
│ @angular/compiler             │ 21.2.10           │ ^21.2.0           │
│ @angular/compiler-cli         │ 21.2.10           │ ^21.2.0           │
│ @angular/core                 │ 21.2.10           │ ^21.2.0           │
│ @angular/forms                │ 21.2.10           │ ^21.2.0           │
│ @angular/platform-browser     │ 21.2.10           │ ^21.2.0           │
│ @angular/router               │ 21.2.10           │ ^21.2.0           │
│ rxjs                          │ 7.8.2             │ ~7.8.0            │
│ typescript                    │ 5.9.3             │ ~5.9.2            │
│ vitest                        │ 4.1.5             │ ^4.0.8            │
└───────────────────────────────┴───────────────────┴───────────────────┘
Anything else relevant?

No response

Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
17 Std. 25 Min.
Gemergte PRs (30 T.)
183

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/angular-cli

Alle Issues in angular/angular-cli

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.