'Angular debugging local NPM package/library

What is the correct way to debug the Angular library/NPM package with watch/build function?

So far I managed to gather the following:

From the main app's package.json must be referenced local file like this:

"my-lib-name": "file:../../projs-lib/dist/my-lib-name"

The library must be built without --prod flag with the watch

If you reference any other of your own libraries, they must be all built within the same environment non-prod/prod

ng build my-lib-name --watch

Delete the library in npm_modules and type npm i, so the remote package is referenced to the local one.

Finally, we start in the second console of the main app, referencing the local library being watched for changes

ng serve

Ok, this work, somehow, but is very buggy and cumbersome. The problems I'm running into:

  • The main app quits building if the interface of the library changes, so I have to restart the ng serve thingy.
  • Sometimes the library watched on changes falls into some sort of file lock and the build/watch must be restarted
  • Cannot figure out the necessary setting in order to debug the source code from the library, that means do not involve minification and uglification into the build

We are reaching the 14th version of Angular and this fundamental feature doesn't seem to be good enough



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source