DEV Community

Sumit Parakh
Sumit Parakh

Posted on

How to make angular app watch for changes in angular library and update itself?

Angular CLI provides a command-line interface to do a lot of things like linting, changing configuration of your application, view docs, run and build your app etc etc..

Out of these commands, there is a generate command which allows us to create building blocks of our application. In this article, we are going to learn how to generate library and watch for changes in the library in an angular application.

Let's get started.

Create an empty angular application

ng new my-lib-app createApplication false

This command will create angular application with an empty workspace.

Add a library project

Go to the root of this project and generate a library.

cd my-lib-app
ng g library lib1

This command will generate a library project for you. Now build this library:-

ng build lib1

Depending on angular.json configuration, it will generate build files in the output path. By default it should be dist/lib1.

Link this library in your local system. Go to the build folder of your library and run command:

npm link

It will globally link your library in your local system and you will be able to install it in any app in your system.

Create an angular application

Run following command to create an angular app:

ng g application myapp

Now install library which we've created earlier. But to enable watching, we’ll have to install this library with a file system url:

npm install file:./dist/lib1

Now run following commands:-

ng build lib1 --watch
ng serve

Now use any component from your library in the app. Run it. Make some changes to the library and you’ll see that app is updating automatically based on those changes.

You can find complete source code of this article here:-

GitHub logo sumitparakh / ng-lib-watch

Make angular app watch for changes in angular library and update itself?

NgLibWatch

This project was generated with Angular CLI version 9.0.2.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Top comments (4)

Collapse
 
sergiuturus profile image
sergiuturus • Edited

It doesn't seem to work in my case. I get the following error running my web app: dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
hijiangtao profile image
Joe Jiang

It seems only changes in library's TypeScript files worked for me (when I rebuild it), other files like html or styles will not be reflected in project's UI?

Collapse
 
ddeivid profile image
DDeivid

I have same situation - changing html or scss won't be reflected after browser refreshes.

Collapse
 
mohsin708961 profile image
{{7*7}}

Awesome