Angular auto reload on package in node_modules code change

Question

Angular 13. I am using one library which has many dependencies, so I can not make it a local library. I want to change the source inside package in node_modules and see its effects - debug it. For that everytime I make any change it have to be stopped and do build again. Its little complex so I need to run and check multiple times. Is there any why where angular will reload on changes in file inside node packages.

Answer 1

I'm facing the same kind of issue with my Angular app. I resolve partially my problem with adding this to the cli angular.json file : "cache": { "enabled": false, "environment": "all" }

But still need to recall ng serve for the browser to notify the changes. I tried npm link (https://docs.npmjs.com/cli/v8/commands/npm-link, https://medium.com/@joosep.parts/create-an-angular-14-library-use-it-locally-when-developing-and-publish-the-package-to-npm-689ca2efdea8) solution but none seems to work for the live reloading thing.

Answer 2

Make sure to update the version in node_modules/my-dep/package.json.

This will tell webpack that your module has been updated and it will invalidate the cache. With this method you can still use in-memory caching.

This works with a library symlinked using "npm link my-dep".

To automate it you can setup a watcher that watches your library for changes and automatically bumps up the version. For example you can use 1.0.0.develop.1, 1.0.0.develop.2 and when it's time to publish the library you revert to a proper version-number.