Angular 12 ng build --watch won't update running ionic serve application

[R4yYx]

🐞 Bug report

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes it used to work with @angular-devkit/build-angular: 0.1102.13

Description

Building an Angular lib with the newest version (ng build), doesn't update the ionic application using this lib, run with ionic serve. With bigger libs the ng build process can outrun the serve or gets stuck.

🔬 Minimal Reproduction

Can be reproduced using this bug repo. First run ng build --watch in the lib folder, then ionic serve in the app folder. Changing anything in the lib component back-button won't update it in the application, even though both app and lib recompile.

To change to the working version run npm run goodvers
Updating anything now will update it in the browser like it is supposed to be.

[StefanNedelchev]

I'm not sure if Ionic support Angular 12 yet

[alan-agius4]

This is expected because node_modules are considered immutable in Webpack 5 unless the "version" changes.

See:
https://webpack.js.org/configuration/other-options/#cachemanagedpaths
https://webpack.js.org/configuration/other-options/#immutablepaths

[keo9ren]

Is there any "straighforward workaround" for this (having an app and a lib and develop using npm link)?

1. As I understood I could go and change the version number of the lib every time I want to see the change reflected in the app, but the dev ux wouldn't be that great.
2. Move to a monorepo
3. Maybe tweak the webpack config of the angular app, with the options from the post above, but how exactly?
4. Any other alternatives?

Is a development approach like this even considered "good practice" by the angular devs?

Any thoughts on this are highly appreciated. Thanks.

[keo9ren]

Solved it by setting NG_BUILD_CACHE Env Variable to 0.

For Powershell Users:
$env:NG_BUILD_CACHE=0

[restfulhead]

Just ran into this as well. I'm not using Ionic, just another angular app that's linking to a library. Setting NG_BUILD_CACHE to 0 works, but the consuming app now seems to compile twice and it's really slow. :/

[kruczjak]

Same here, we're using library which was also created with angular cli.
Everything was working great when running ng build --watch in library and symlinking it to application with npm link. However after ugrading to Angular 12 only app is recompiling itself when NG_BUILD_CACHE is set to 0 and also very, very slowly.

[kruczjak]

Following #20962 (comment) I've made a simple patch into build_angular: kruczjak@955d2d3

After this change using NG_BUILD_CACHE=0 is no longer needed and rebuilds are much faster (for me it was 65s -> 11s). Maybe we could get it configurable in build options?

[restfulhead]

@alan-agius4 Would it be possible to re-open this issue and consider @kruczjak 's patch?

[alan-agius4]

Let me reopen this to discuss the issue in our next team meeting if we should provide an option to disable managed paths.

In general, if this would will be added it would most likely be configured via an environment variable.

Alternatively, a 3rd party builder can also be used in this case to configure this option.

That being said we don’t really recommend using npm linking.