How to use angular library locally with Hot Module Reload

#angular #typescript

We can create angular library for reusability and there are many different ways to use it in your angular application.

One of them is is to use "npm link" command to link your library and application. However there are some drawbacks in that approach.

The biggest one is if you make any changes in your library you need to build your library again and again we is very not a very productive way. In this article I will explain how to use --watch command with ng build to overcome that drawback.

Steps to create angular library

Use below Angular CLI commands to generate Angular library project. ```

ng new ngx-shared-lib --create-application=false
cd my-workspace
ng generate library ngx-shared-lib


* Navigate to library workspace and use below commands to build library project.

ng build --watch


We are building the library project in "watch" mode so that any code changes will reflect in target application instantly.

* Use below Angular CLI commands to generate Angular Application.

ng new ngx-sample-app


* Navigate to angular application created above and install the library using below commands.

npm install file://C://angular-local-lib-example//ngx-shared-lib//dist//ngx-shared-lib"


Replace library path with physical path of your local system where library is created.

* Run below commands to serve your application.

ng serve


That's all...

Now **make any code changes in your library and save it.**
It will automatically reflect in your target application as we have run the library in "watch" mode.

You can find the sample code base in this github repository.

  
    
      
      
        patelvimal
       / 
        angular-local-library-example
      
    
    
      Example on how to use angular library locally with HMR