esbuild doesn't watch for local library changes while running dev server (cli-cache-enabled=true,preserveSymlinks=true)

[e23gap32oq]

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

with @angular-devkit/build-angular:browser builder

Description

see #25753
see #26585 (this is probably not fixed as the steps to reproduce are more or less the same)

create a library

npx @angular/cli new test-lib --no-create-application --style=scss
cd test-lib
npx @angular/cli generate library test-lib
npm run watch

create an app

npx @angular/cli new test-app --routing=true --style=scss --ssr=false
cd test-app
npm link "../test-lib/dist/test-lib"

change package.json (test-app)

"dependencies": {
	"test-lib": "file:../test-lib/dist/test-lib"
}

change angular.json (test-app)

"builder": "@angular-devkit/build-angular:application",
	"options": {
		"preserveSymlinks": true,

change app.component.ts (test-app)

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { TestLibComponent } from 'test-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, TestLibComponent],
  template: '<lib-test-lib></lib-test-lib>',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'test-app';
}

test-app

npm start

make some changes in test-lib.component.ts and you will get

No output file changes.
Unchanged output files: 3
Application bundle generation complete. [0.xxx seconds]

Result is that no changes are reflected in your browser.

now stop applications, delete .angular directories, change angular.json in test-lib and test-app as follows:

"version": 1,
"cli": {
	"cache": {
		"enabled": false
    }
},

test-lib

npm run watch

test-app

npm start

make some changes in test-lib.component.ts and you will get

Initial Chunk Files | Names | Raw Size
main.js             | main  |  1.09 MB |

Unchanged output files: 2
Application bundle generation complete. [0.xxx seconds]
Page reload sent to client(s).

Result is that changes are now reflected in your browser.

both scenarios should be tested:
(cli-cache-enabled=false,preserveSymlinks=true)
(cli-cache-enabled=true,preserveSymlinks=true)

Minimal Reproduction

see description

Exception or Error

No response

Your Environment

Angular CLI: 17.0.7
Node: 20.10.0
Package Manager: npm 10.2.5
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.7
@angular-devkit/build-angular   17.0.7
@angular-devkit/core            17.0.7
@angular-devkit/schematics      17.0.7
@schematics/angular             17.0.7
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

As mentioned both in #26585 and #25753 you need to configured TypeScript path mappings in your tsconfig file.

If the problem persists please provide a runnable reproduction. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[alan-agius4]

As mentioned above, to move forward, please provide a runnable example illustrating the issue. Without it, we can't proceed and will have to close the issue. Also, remember to follow the Code of Conduct when commenting.

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.
Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Then you can push this repository to github and link it here.

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