`TestBed.overrideComponent` breaks module imports with `@angular/build:unit-test`
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
- Bereich
- build-system, testing
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
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
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus angular/angular-cli
-
area: @angular/build gemini-triaged
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
angular/angular-cli#33055 · 1 Kommentar · 3 Reaktionen ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 1 zugewiesene Person ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 1 zugewiesene Person ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34128 · 1 zugewiesene Person ·
Alle Issues in angular/angular-cli
Ähnliche Issues
-
blocklist removal
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 65/100
MetaMask/eth-phishing-detect#296544 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
pastelsky/bundlephobia#1122 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100