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-example
Generate the lib:
ng g library my-lib
Once generated, go to
projects/my-lib/src/lib directory and create
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
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.