DEV Community

loading...
Cover image for How to use angular library locally with Hot Module Reload

How to use angular library locally with Hot Module Reload

patelvimal profile image vimal patel ・2 min read

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
Enter fullscreen mode Exit fullscreen mode
  • Navigate to library workspace and use below commands to build library project.
ng build --watch
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode

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

  • Run below commands to serve your application.
ng serve
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo patelvimal / angular-local-library-example

Example on how to use angular library locally with HMR

Discussion (0)

Forem Open with the Forem app