With version 6 Angular introduced new amazing feature which integrates CLI and ng-packagr to generate and build Angular libraries. Unfortunately, there doesn’t seem to be a built-in way to live reload the app when changes are made to the library source code, so here we’ll present a super handy way to make the app reload automatically whether changes are made to the host app or to the library source code, all while keeping the original structure ready to build and publish (no need to revert any changes made to the code in this tutorial prior building and publishing the lib).
Let’s dive in..
First we need an app which will serve as the host for the library (skip if already have):
ng new angular-lib-live-reload-exampleGenerate the lib:
ng g library my-libOnce generated, go to projects/my-lib/src/lib directory and create index.ts file:
index.ts file needs to export all lib exports that are meant to be publicly available (i.e. the created index.ts file will play public-api.ts file role in our case):
Now go to projects/my-lib/src and modify the public-api.ts file so it exports all from the previously created index.ts file:
Finally, we need to update generated TS paths for the lib in tsconfig.json file (the root one) to point to the index.ts file created previously:
That’s it! Now ng serve the app, import the lib module and use it within the host app as it was installed as NPM package, all while having live reloading the app whether changes are made to the host app or to the library source code.
The source code is available at: https://github.com/seidme/angular-lib-live-reload-example
NOTE: No need to revert any changes made to the code in this tutorial prior building and publishing the lib, everything will work as it is.
.
