Vite dev server with npm workspaces not reloading on project reference update
jjgriff93 opened this issue · 2 comments
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
I have a monorepo setup using npm workspaces, with /app
containing the Angular application and /common
containing some common classes, interfaces etc.
In the Angular app, in the tsconfig
I have common set up as a project reference, and this is then made accessible within my angular code by a typical module reference (@myorg/common
).
When serving my app, I have typescript set up to watch any changes in the /common
folder and rebuild, and before switching to the new Vite-based dev server this all worked fine: when doing an ng serve
, then modifying a class in common, the app would be reloaded with the latest code.
However, with the new server, because Vite caches node modules in .angular/cache/v17.2.0/vite/deps
, and only refreshes it on package-lock changes, its caching my symlinked common module, and then ignoring any changes I make. Not only does this mean is not live reloading, but on subsequent runs, unless I modify the package lock or remove the cache, it will use a stale version of my common module.
In a pure Vite scenario, this would be resolved by adding a vite.config.ts
file like so:
export default {
optimizeDeps: { exclude: ['@myorg/common'] }
};
I've read several threads where modifying the Vite config doesn't seem to be possible or on the roadmap for the dev server, so I'm not sure how else I'm supposed to resolve this without disabling the cache entirely through angular.json
, which removes a lot of the performance benefits. Appreciate any help!
Minimal Reproduction
- Create top-level npm workspace
package.json
{
"name": "repro",
"workspaces": [
"app",
"common"
]
}
mkdir app && mkdir common
- Create a basic typescript library in
common
with apackage.json
and a basic class cd app && ng new
- Modify tsconfig to have project reference to common:
"references": [
{
"path": "../common"
}
]
- Import the library class in the app component and use it
- Within
/common
, runtsc -w
in one shell and keep running - Within
/app
, runng serve
- Modify the class in
common
. tsc will rebuild but angular dev server will not reload
Exception or Error
No response
Your Environment
Angular CLI: 17.2.0
Node: 20.12.1
Package Manager: npm 10.5.0
OS: darwin arm64
Angular: 17.2.1
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1702.0
@angular-devkit/build-angular 17.2.0
@angular-devkit/core 17.2.0
@angular-devkit/schematics 17.2.0
@angular/cdk 17.2.0
@angular/cli 17.2.0
@angular/fire 17.0.1
@angular/google-maps 17.2.0
@schematics/angular 17.2.0
rxjs 7.8.1
zone.js 0.14.4
Anything else relevant?
No response
The development server has a prebundle
option which should allow for the customization needed to handle this use case.
An example configuration would be as follows (note the prebundle
option usage):
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "my-app:build:production"
},
"development": {
"buildTarget": "my-app:build:development",
"prebundle": {
"exclude": ["@myorg/common"]
}
}
},
"defaultConfiguration": "development"
},
The prebundle
option can also be set to false
to disable all Vite-based dependency prebundling/optimization.
If this does not solve the issue, please let us know and we can investigate further.