bug: @ionic/angular incompatible with Angular 21 native Vitest (@angular/build:unit-test) - ESM directory imports

[devsappines]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When using Angular 21's native Vitest support (@angular/build:unit-test builder), tests fail with ESM directory import errors for any component that imports from @ionic/angular.

Error message:
Error: Directory import '/node_modules/@ionic/core/loader' is not supported resolving ES modules imported from /node_modules/@ionic/angular/fesm2022/ionic-angular.mjs
Did you mean to import "@ionic/core/loader/index.js"?

And:
Error: Directory import '/node_modules/@ionic/core/components' is not supported resolving ES modules imported from /node_modules/@ionic/angular/fesm2022/ionic-angular-standalone.mjs
Did you mean to import "@ionic/core/components/index.js"?

Expected Behavior

Tests should run successfully when using Angular 21's native Vitest builder with @ionic/angular.

Steps to Reproduce

Steps to Reproduce

1. Create an Angular 21 project with Ionic 8
2. Configure angular.json to use:

   "test": {
     "builder": "@angular/build:unit-test",
     "options": {
       "tsConfig": "tsconfig.spec.json"
     }
   }
 }

3. Create a test file that imports any Ionic component
4. Run ng test

Code Reproduction URL

https://angular.dev/guide/testing

Ionic Info

Ionic:
Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 8.7.18
@angular-devkit/build-angular : 21.2.0
@angular-devkit/schematics : 20.3.15
@angular/cli : 21.2.0
@ionic/angular-toolkit : 12.3.0
Angular version: 21.2.0
Vitest version: 4.0.18

Capacitor:
Capacitor CLI : 7.4.5
@capacitor/android : 7.4.5
@capacitor/core : 7.4.5
@capacitor/ios : 7.4.5

Utility:
cordova-res : not installed globally
native-run : 2.0.3

System:
NodeJS : v22.22.0
npm : 10.9.4

Additional Information

The issue is that @ionic/angular uses directory imports:

Current (broken)	Should be
@ionic/core/components	@ionic/core/components/index.js
@ionic/core/loader	@ionic/core/loader/index.js

Node.js ESM does not support directory imports, and Vitest runs in ESM mode.

---

Workarounds Attempted

Workaround	Result
runnerConfig with server.deps.inline	❌ No effect - Angular's builder overrides settings

---

Related Issues

• bug: Directory import ... is not supported resolving ES modules imported from ... Did you mean to import "@ionic/core/components/index.js"? #30686 - Similar issue with @ionic/react
• bug: Directory import is not supported resolving ES modules #30730 - Similar issue with @ionic/vue
• [@angular/build:unit-test][vitest] Configurable vitest angular/angular-cli#30429 - Request for Vitest configuration support

---

Additional Context

Angular 21 has made Vitest the default test runner. This incompatibility prevents Ionic Angular users from adopting Angular 21's native testing approach.