New application builder (v17) does not live reload changes in linked libraries

[ChristianOss]

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

16.2.10

Description

The new application builder does not live reload changes to linked libraries using npm link

In order to make it work for now, revert to the old builder. For a new project, change @angular-devkit/build-angular:application to @angular-devkit/build-angular:browser and "browser": "src/main.ts", to "main": "src/main.ts", in angular.json.

Minimal Reproduction

Firstly, create a new library using terminal

ng new lib-workspace --no-create-application
cd lib-workspace
ng generate library my-lib
ng build
cd dist/my-lib
npm link
cd ../..
ng build --watch

Start another terminal

# Use SCSS and no SSR
ng new application-with-lib
cd application-with-lib
npm link my-lib

Replace app.component.ts

import { Component } from '@angular/core';
import { MyLibComponent } from 'my-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyLibComponent],
  template: '<lib-my-lib></lib-my-lib>'
})
export class AppComponent {
}

Add preserveSymlinks = true to angular.json

"projects": {
    "application-with-lib": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "preserveSymlinks": true,
            ...
}

Run the app

ng serve

Now change something in your library's my-lib.component.ts. Result is that no changes are reflected in your browser.

Exception or Error

No response

Your Environment

Angular CLI: 17.0.5
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.0.5
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.0.5
@schematics/angular             17.0.5
ng-packagr                      17.0.2
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

You need to specify the linked library in the tsconfig path mappings. This will cause the library to be bundled as part of the application and not handled by vite optimizer.

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
     ...
    "paths": {
      "my-lib": [
        "./node_modules/my-lib"
      ]
    }
}

Currently, there is a problem however when using preserveSymlinks: true, which causes the update not to be picked up. This will addressed via #26586

[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.}