Angular library and live reload

Question

I followed several tutorials on how to build and test an angular libary.

E.g. https://www.youtube.com/watch?v=lvjt9rBHWjo

It's working fine except that each time I'm doing a ng build mylibary, it's erasing the mylibrary folder in the dist folder. And before it has finished to build, the server (launched with npm start) detect the change (folder erased) and re compiles. And of course, since the library folder is not present anymore, there is a compilation error with no other thing to do than ctrl-c and again npm start ...

What did I missed ?

Answer 1

You can use wait-on to await the building of the library, rimraf to clean the dist directory and npm-run-all to run the watch scripts parallel with one command from one command line window. Therefore install wait-on, rimraf and run-p as development dependency:

npm install wait-on --save-dev
npm install rimraf --save-dev
npm install run-p --save-dev

And update in package.json the scripts consequently based on the example below:

  "scripts": {
    ...
    "clean": "rimraf dist",
    "start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000",
    "watch:lib": "ng build your-library-name --watch",
    "watch:all": "npm run clean && run-p watch:lib start:app",
    ...
  },

The library and the application together can be watched using npm run watch:all command.

This is how the scripts work:

"clean": "rimraf dist"

Removes the dist folder.

"start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000"

Waits on the fesm5 folder in the dist directory, ng serve --poll 2000 starts the app and extends the file watch polling time to 2000 ms. In my case the last one was necessary because after a library modification the app was able to reload in the browser with the same content as previously, I could only see the new build after pressing F5.

"watch:lib": "ng build your-library-name --watch"

Builds the library in watch mode.

"watch:all": "npm run clean && run-p watch:lib start:app"

Cleans the dist folder, after that it serves the application and watches the library parallel.

Answer 2

Here is 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 prior building and publishing the lib).

Having a library called my-lib, the following steps are needed:

• Go to projects/my-lib/src/lib directory and create index.ts file which exports lib components that are meant to be publicly available

• Edit the projects/my-lib/src/public-api.ts file in a way it exports all from the previously created index.ts file, e.g.:

  export * from './lib/index';

• Finally, update the generated TS paths for the lib in tsconfig.json file (the root one) to point to the index.ts file created previously (instead of pointing to the dist folder)

Here is the git commit showing the changes described in the steps above.

For a more detailed info visit: Setting up live reload for Angular CLI libraries.

No need for external dependencies.