Bug: External Templates/Styles Are Not Resolved When Testing Angular 21 Standalone Components With Vitest

[MedAmineAzaiez]

Command

test

Is this a regression?

• No

The previous version in which this bug was not present was

No response

Description

---

When running component tests using Angular 21 + Vitest, any standalone component that uses external templateUrl or styleUrls fails during TestBed compilation.

This happens even in the smallest possible Angular 21 project, with only one component and no dependencies.

Inline templates/styles work.
External templates/styles always fail.

❌ Error:

Error: Component 'FooterComponent' is not resolved:
 - templateUrl: './footer.component.html'
 - styleUrls: ['./footer.component.scss']
Did you run and wait for 'resolveComponentResources()'?

This makes it impossible to write meaningful unit tests for real-world Angular components using Vitest.

---

📄 package.json

{
"name": "angular-v21-vitest-repro",
"version": "0.0.1",
"scripts": {
"start": "ng serve",
"build": "ng build",
"test": "vitest run",
"test:watch": "vitest"
},
"dependencies": {
"@angular/animations": "21.0.1",
"@angular/common": "21.0.1",
"@angular/compiler": "21.0.1",
"@angular/core": "21.0.1",
"@angular/forms": "21.0.1",
"@angular/platform-browser": "21.0.1",
"@angular/platform-browser-dynamic": "21.0.1",
"@angular/router": "21.0.1",
"rxjs": "7.8.1"
},
"devDependencies": {
"@angular/build": "^21.0.1",
"@angular/cli": "^21.0.1",
"@angular/compiler-cli": "21.0.1",
"jsdom": "^24.0.0",
"typescript": "~5.9.0",
"vitest": "^4.0.14"
}
}

---

❌ 

Actual Behavior

When running:

vitest run

Angular throws:

Error: Component 'FooterComponent' is not resolved:
 - templateUrl: './footer.component.html'
 - styleUrls: ['./footer.component.scss']

The test never reaches instantiation.
Fails even with TestBed.initTestEnvironment manually set up.

---

✅ 

Expected Behavior

Angular’s TestBed should:

• Resolve external templates and styles

• Inline them (as CLI does under Jest/Karma)

• Allow component rendering with external resources

• Behave consistently across all supported test runners

• Support Vitest as promoted in Angular 17–21 documentation

---

🧠 

Background

Angular’s 

resolveComponentResources()

 is normally invoked automatically under Karma/Jest via Angular CLI.

But with Vitest:

• Angular CLI is not invoked

• No resource loader runs

• External template/scss paths remain unresolved

• TestBed compilation fails before component instantiation

---

🎯 

Why This Matters

• Angular 21 recommends Vitest for fast testing.

• Standalone components are the official standard.

• Real-world Angular components almost always use external HTML/CSS.

• This issue blocks migration from Karma/Jest.

• It also prevents organizations from adopting Angular’s modern testing story.

---

🙏 

Request

Could the Angular team clarify:

1. Should Angular TestBed auto-resolve external resources in Vitest environments?

2. Should @angular/build provide a resource loader for Vitest the same way build-angular did for Karma/Jest?

3. Is support for external template/style URLs planned?

4. Is there a recommended workaround besides manually inlining all templates?

Minimal Reproduction

🔁 Minimal Reproduction

**🔗 Repro Link **

👉 https://stackblitz.com/edit/stackblitz-starters-ugtr4s6m?file=vitest%2Ffooter.component.spec.ts

Run it using
npm test or vitest run

---

Exception or Error

RUN  v4.0.15 /home/projects/stackblitz-starters-ugtr4s6m

 ❯ vitest/footer.component.spec.ts (1 test | 1 failed) 5ms
   ❯ FooterComponent (1)
     × should create 3ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  vitest/footer.component.spec.ts > FooterComponent > should create
Error: Component 'FooterComponent' is not resolved:
 - templateUrl: ./footer.component.html
 - styleUrls: ["./footer.component.scss"]
Did you run and wait for 'resolveComponentResources()'?
 ❯ FooterComponent.get node_modules/@angular/core/fesm2022/_debug_node-chunk.mjs:18164:17
 ❯ getComponentDef node_modules/@angular/core/fesm2022/testing.mjs:1184:16
 ❯ isStandaloneComponent node_modules/@angular/core/fesm2022/testing.mjs:1180:15
 ❯ queueTypesFromModulesArrayRecur node_modules/@angular/core/fesm2022/testing.mjs:964:20
 ❯ TestBedCompiler.queueTypesFromModulesArray node_modules/@angular/core/fesm2022/testing.mjs:982:5
 ❯ TestBedCompiler.configureTestingModule node_modules/@angular/core/fesm2022/testing.mjs:606:12
 ❯ TestBedImpl.configureTestingModule node_modules/@angular/core/fesm2022/testing.mjs:1432:19
 ❯ TestBedImpl.configureTestingModule node_modules/@angular/core/fesm2022/testing.mjs:1303:33
 ❯ vitest/footer.component.spec.ts:17:19
     15| 
     16|   it('should create', async () => {
     17|     await TestBed.configureTestingModule({
       |                   ^
     18|       imports: [FooterComponent],
     19|     }).compileComponents();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯


 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  10:07:45
   Duration  1.70s (transform 46ms, setup 0ms, import 946ms, tests 5ms, environment 308ms)

Your Environment

Angular: 21.0.1
    Node: 20.x
    Vitest: 4.0.14
    TypeScript: 5.9.3
    OS: macOS

Anything else relevant?

No response

[alan-agius4]

Using vitest directly is not supported, please use the Angular CLI to run the tests.