4

I am developing an Angular Library and have the typical setup whereby I have my library project and then another project in which I am consuming the built library output.

I want to be able to watch for library source files and rebuild my library automatically. I also want my consuming application to rebuild when it detects my library has been rebuilt.

In the case of my application detecting library changes, I believe this is already setup, since ng serve watches for file changes automatically, and in the tsconfig for my application, the path to my lib is mapped to the dist folder where the library output is built. If I manually change one of these files in the dist folder, the rebuild of my consuming app gets triggered so that part is working fine.

In the case of watching for library changes, I have seen I can specify my library name and a watch flag as part of the build command, so:

ng build my-lib --watch

I have the following scripts defined in my package.json:

"start": "npm run build && ng serve",
"build": "ng build && npm run bundle-styles",
"bundle-styles": "scss-bundle -c scss-bundle.config.json"

I am assuming I would need the watch on my library spawned on a separate process, so I may need a further script in my task thats just for building and watching my library?

Then on another process run the build script that would serve up my consuming app.

I did actually attempt this, but I hit a problem with my bundle-styles task which I need to performed after angular cli does it's build but before it starts watching for changes. I'm starting to think I may need to create my own custom watch task with something like gulp

Whats the correct approach here when developing changes in a library to see them get detected and rebuilt in a consuming application?

Thanks

mindparse
  • 6,115
  • 27
  • 90
  • 191
  • See an answer on a similar question here: https://stackoverflow.com/a/62486003/1697459 – Wilt Oct 04 '22 at 14:24

1 Answers1

-1

For simple applications your existing setup is correct. I spawn two processes when my application loads, one which builds a library with --watch and one which serves my main application. But if you start doing complicated things like your bundle-styles task or if you find ng serve breaks when you add a library component and then reference it in a lazy-loaded module (which happens in my project), you should bite the bullet and write a custom script. In my case I need to get the output from ng build lib-name --watch and if I read there is a compilation error, I can first re-start the build process and if there is still a compilation error notify myself about the error. Similarily, I often need to re-serve the main application when the library changes, so when there is no longer any error in the library rebuilding I kick off a re-start of my ng serve process.

I know this isn't ideal but the existing ng options just aren't going to cut it if you want to do something the Angular team hasn't developed themselves.