Angular Build --watch caches initial version of files in a symlinked folder. Subsequent changes are not reflected until full rebuild

[thaoula]

Command

build

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

Angular 12

Description

Hi Team,

We are having issues with Angular not loading changes of symlinked files. It appears to build the first time and cache the output. Changing the file shows Angular rebuilding but it uses the old version. You have to kill ng build and start again.

Our project is in single Git repository. It consists of an Angular 14 front end and a Node backed API using NestJS. We also have model folder that contains shared DTO's and utilities.

The simplified folder structure is as follows -

/
 angularapp
    libs/
       model (symlink of /model)
 nodeapp
    libs/
       model (symlink of /model)
 model

We have been using the structure since Angular 2 and I believe it worked up until you switch to WebPack 5.

Minimal Reproduction

1. Create an Angular Project
2. Create a folder outside the project called model
3. Symlink the folder inside the Angular project eg - /angularapp/model
4. Add files to the model folder.
5. Do a build in watch mode
6. Change the contents of a file in the model folder
7. Wait for watcher to finish build
8. Refresh the browser and the change will not be visible
9. Cancel the watch build
10. Build again
11. Refresh the browser and the change will be visible.

Exception or Error

No response

Your Environment

Angular CLI: 14.2.1
Node: 16.15.1
Package Manager: npm 8.11.0 
OS: darwin arm64

Angular: 14.2.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.1
@angular-devkit/build-angular   14.2.1
@angular-devkit/core            14.2.1
@angular-devkit/schematics      14.2.1
@angular/cli                    14.2.1
@schematics/angular             14.2.1
rxjs                            7.5.5
typescript                      4.6.2

Anything else relevant?

No response

[alan-agius4]

Can you try to enable preserveSymlinks?

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

More info: https://angular.io/cli/build

[thaoula]

Hi @alan-agius4,

We already have this turned on -

Just wondering if this WebPack 5 issue is the root cause -
webpack/webpack#15100

Regards,
Tarek

[alan-agius4]

@thaoula, indeed it does look like the root cause. Can you try to apply the suggested patch in the comments and verify if that works?

node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js

+    snapshot: {
+      module: {
+        hash: true,
+      },
+    },
      watch: buildOptions.watch,
      watchOptions: {
        poll,
        ignored: poll === undefined ? undefined : '**/node_modules/**',
      },

[thaoula]

Hi @alan-agius4,

Is this correct? It did not seem to work.

Steps:

1. Applied the changes above.
2. I cancelled the build.
3. I performed a rebuild in watch mode.
4. Attempted to make a change
5. Refreshed browser - no effect.

Regards,
Tarek

[alan-agius4]

Based on the comments in webpack/webpack#15100 (comment), yes that should be a workaround for this issue.

Not sure if you need to delete the cache (rm -rf .angular/cache)

[thaoula]

Let me try and delete the cache now

[thaoula]

Hi @alan-agius4,

I have tried deleting the cache and did not make any difference unfortunately.

It seems other people also see this above settings not working