externalDependencies not working as expected during serve with Vite

[kfrederix]

Command

serve

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

When marking certain dependencies as external via option externalDependencies we get runtime errors during dev mode with the Vite server because Vite will prefix the import specifiers with /@id/ (during import-analysis).

For example:

import { BehaviorSubject, Subject, Subscription } from "/@id/rxjs";
import { map, first } from "/@id/rxjs/operators";

This breaks expected behavior, for example when we want to use an importmap to resolve external dependencies at runtime.

I realize that this is an issue with Vite itself, more then Angular: open issues exist on Vite since quite some time already:

• Support external in dev vitejs/vite#6582
• Respect import maps vitejs/vite#2483

However, I do believe that we can work around this issue by adding a small Vite plugin in vite-server.ts to remove this /@id/ prefix for explicit externalDependencies. I would be more than willing to submit a PR after discussion.

Minimal Reproduction

Here's a StackBlitz link with a simple repro case:
https://stackblitz.com/edit/stackblitz-starters-rbro7s?file=angular.json

1. rxjs and rxjs/operators are declared as externalDependencies
2. importmap is added in index.html to resolve these dependencies at runtime

Exception or Error

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Your Environment

Angular CLI: 18.0.7
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 18.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.7
@angular-devkit/build-angular   18.0.7
@angular-devkit/core            18.0.7
@angular-devkit/schematics      18.0.7
@angular/cli                    18.0.7
@schematics/angular             18.0.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else relevant?

No response

[clydin]

An upstream fix would be ideal. However, if the code is minimal, the team would welcome a contribution to address the issue.

[kfrederix]

@clydin @alan-agius4 thank you for triaging this!
I have submitted a first attempt at a PR for this. Hopefully it can help.
I did not add any new test cases yet. If you can agree with such an approach, I will try to add a test for this too.

Edit: I agree that a fix/solution upstream would be best of course. But since the issue has been open for more than 2 years already, I think it's unlikely that it will get solved soon.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}