Vite dev server with npm workspaces not reloading on project reference update

[jjgriff93]

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

1. Create top-level npm workspace package.json

{
  "name": "repro",
  "workspaces": [
    "app",
    "common"
  ]
}

2. mkdir app && mkdir common
3. Create a basic typescript library in common with a package.json and a basic class
4. cd app && ng new
5. Modify tsconfig to have project reference to common:

"references": [
    {
      "path": "../common"
    }
  ]

6. Import the library class in the app component and use it
7. Within /common, run tsc -w in one shell and keep running
8. Within /app, run ng serve
9. 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

[clydin]

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.