TestBed.overrideComponent doesn't work with AOT and webpack
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 14h 23m
- Merged PRs (30d)
- 162
Description
### 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_
Contributor guide
Research direction
Start with the minimal reproduction: a component test using TestBed.overrideComponent or TestBed.overrideModule with Karma, the webpack builder in browser mode, and AOT enabled. Compare the failure with application builder mode or AOT disabled, then verify that the override test runs without the missing @Component metadata error under the affected configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- build-system, testing-qa
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100