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

まず angular.json の両方の @angular/build:unit-test runner 設定で app.spec.ts の再現を実行し、その後 @angular-devkit/build-angular:karma と比較します。TestBed.overrideComponent(App, {}) がインポートされた TestModule にどのような影響を与えるかを追跡し、提供されたテストを両方の runner で実行して修正を検証します。このテストでは test-component を認識し、App を正常に作成できる必要があります。

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