Last week the Angular team released the newest version of Angular and the Angular CLI, version 6.

If you have played around with its new workspaces that are great for creating libraries you probably noticed that there is no livereload for the libraries. This is super important to have while developing, and luckily it’s super easy to add.

So let’s dive into it!

Your workspace

I’ll expect you to know how to create a workspace and add the libraries to your project yourself and won’t go into details of it, but in short, it’s just using the “ng new” to generate a workspace, and the “ng generate library [library-name]” to generate your library.



Generating Angular CLI library

Adding livereload to your library

Once you have your project and libraries generated you want to rename and edit a few files in order to enable livereload.

Rename public_api.ts

First you want to into the “src” folder of our library and rename the public_api.ts to index.ts



Renaming public_api.ts to index.ts

Update ng-package files

Secondly you want to go into the ng-package.json ng-package.prod.json and change the entryFile to “src/index.ts”

Changing entryFile to src/index.ts

Update tsconfig path

Finally you want to go into the tsconfig.json at the root of your project and change the path of your library to “projects/your-library/src” rather than “dist/your-library”.

Changing the path to library src

Now fire up your Angular CLI project within the workspace, import and use your library as if it was installed with NPM, and watch it reload as you edit your library source code.