How to Avoid Angular CLI Caching When Debugging npm linked Libraries
I ran into an issue that slowed me down: when serving the app, Angular CLI’s build cache was preventing updates to the JS and WASM files from being picked up. The build reused a cached version, which meant I couldn’t test changes without restarting or clearing the cache manually.
For the past few months, I’ve spent most of my time working on a JS/WASM npm package. When I need to debug its integration in an Angular app, I use npm link to bring it into node_modules. However, I ran into an issue that slowed me down: when serving the app, Angular CLI’s build cache was preventing updates to the JS and WASM files from being picked up. The build reused a cached version, which meant I couldn’t test changes without restarting or clearing the cache manually.
This caching is generally a great feature, for regular Angular development tasks, it speeds things up. But in this context, it became a bottleneck.
Initially, I thought the only solution was to disable caching via ng cache disabled or directly in the angular.json. While that worked, the build became significantly slower, and toggling the flag each time was cumbersome. I even opened a feature request to Angular CLI asking for a way to disable cache on demand. Fortunately, @alan-agius4 pointed out a simpler solution.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"prebundle": {
"exclude": ["lib"]
}
}
}The feature I needed is actually well-documented. Pre-bundling is an optimization step in Angular (which uses Vite under-the-hood), and excluding my library from this step solved the issue with minimal impact on performance.
Once I knew what to search for, I quickly found a relevant answer on StackOverflow and a good description in the documentation.
The prebundling process analyzes all the third-party project dependencies within a project and processes them the first time the development server is executed. This process removes the need to rebuild and bundle the project's dependencies each time a rebuild occurs or the development server is executed.
I had checked the schema of the angular.json, and searched for solutions. I just failed to connect the dots this time. It’s a good reminder to keep on doing my own research first, but also not to be afraid of questioning the default behavior. Even if I’m wrong, I can learn from it.
angular
