angular / angular/angular-cli

TestBed.overrideComponent doesn't work with AOT and webpack

Offen
#32,628 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: @angular-devkit/build-angular devkit/build-angular:karma freq1: low severity3: broken type: bug/fix
Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
14 Std. 23 Min.
Gemergte PRs (30 T.)
162

Beschreibung

### 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

TestBed.overrideComponent and TestBed.overrideModule don't seem to work with karma, webpack builder (builderMode: browser) and aot enabled. Changing any of these settings, so builderMode: application or disabling aot "fixes" the problem. The same issue was reported here https://github.com/angular/angular-cli/issues/30017 but i guess it was only fixed for esbuild? Is there any workaround for this? or can it be fixed for angular20?

### Minimal Reproduction

Create a simple valid component, turn on AOT for Karma, and make a test where you use TestBed.overrideComponent to reset metadata. You don't even need to specify an actual override in the second parameter to trigger the issue: TestBed.overrideComponent(YourComponent, {}) triggers the failure.

builderMode: browser needs to be set

### Exception or Error

```text
Error: App class doesn't have @Component decorator or is missing metadata.
at invalidTypeError (node_modules/@angular/core/fesm2022/testing.mjs:1661:12)
at forEach (node_modules/@angular/core/fesm2022/testing.mjs:1084:23)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)
at apply (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17:1)
at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:398:28)
at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:2132:39)
```

### Your Environment

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

Angular CLI: 20.3.18
Node: 22.22.0
Package Manager: npm 10.9.4
OS: win32 x64

Angular: 20.3.17
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package Version
---------------------------------------
@angular-devkit/architect 0.2003.18
@angular-devkit/build-angular 20.3.16
@angular-devkit/core 20.3.18
@angular-devkit/schematics 20.3.18
@angular/build 20.3.18
@angular/cli 20.3.18
@schematics/angular 20.3.18
rxjs 7.8.2
typescript 5.9.3
zone.js 0.15.1
```

### Anything else relevant?

_No response_

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der minimalen Reproduktion: einem Komponententest mit TestBed.overrideComponent oder TestBed.overrideModule mit Karma, dem webpack builder im browser mode und aktiviertem AOT. Vergleiche den Fehler mit dem application builder mode oder deaktiviertem AOT und verifiziere anschließend, dass der Override-Test unter der betroffenen Konfiguration ohne den Fehler wegen fehlender @Component-Metadaten ausgeführt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
build-system, testing-qa
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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