Angular build watch for multiple libraries and and serve to another app

Question

I developing three helper angular libraries that consumed by another main application. The ideal is having live rebuild for the libaries while my main app import those libraies and run at the same time so I can have live reload for my main app during development process of the libraries.

I found ng build --watch and I use it mutiple times with run-s for each of my libary then npm link the built folder then npm link my-libary in my main app.

But the problem is when a libary is rebuilt, It first erase the linked files in dist folder (which linked by npm locally) and my main app start yelling compiler error and stop.

The expectation is when I modify a library and save, It will be rebuilt and my angular app will consume the newly rebuilt library without yelling errors. How can I achieve this

My script is:

...
"scripts": {
    "ng": "ng",
    "prestart": "run-s \"ng build Lib-1 --prod --watch\" \"ng build Lib-2 --prod --watch\" \"ng build Lib-3 --prod --watch\" "
    "start": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve"
 ...
}
...

Check out my answer here: stackoverflow.com/questions/59356732/… Your question is not the same, but it can help you to move on in this topic. — Milan Tenk
– Milan Tenk, Commented Mar 1, 2020 at 12:38

Tall_Joe · Accepted Answer · 2021-01-27 18:11:23Z

6

I asked a similar question here, and was able to have my libraries watched when I launch the app. I'm copying the answer over here for any interested folks.

After a lot of sleuthing, I came across Nikola Kolev's Angular 6: build — watch multiple dependent libraries in one shell post.

While I don't have it down to one npm script like Nikola was able to do, I am able to do it by running two scripts (there are 7 total scripts involved), and that's good enough for now.

First, be sure to have wait-on, rimraf and npm-run-all installed. We're also using cpx; but, that's not about getting the libraries to be "watched" -- just including to be overly thorough.

Here are all the scripts:

"clean": "rimraf dist",
"watch-lib:lib-1": "ng build lib-1 --watch",
"watch-lib:lib-2": "ng build lib-2 --watch",
"watch-libs": "npm-run-all clean --parallel watch-lib:*",
"copy-styles:lib-1": "cpx projects/lib-1/src/lib/theme.scss dist/lib-1",
"copy-styles:lib-2": "cpx projects/lib-2/src/lib/theme.scss dist/lib-2",
"start-staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",  
"watch-staging": "npm-run-all copy-styles:* start:staging"

When I want to work on the libraries and have them be "watched", I run npm run watch-libs in one terminal. When that is finished, I run npm run watch:staging in a second terminal. Then, I'm able to launch the app in a browser, and any edits to any of the code, in libraries or in the app itself are caught, and the app recompiles as desired.

answered Jan 27, 2021 at 18:11

Tall_Joe

1993 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tall_Joe Over a year ago

There is another approach described at the Angular-CLI Github. I haven't tried it yet, but plan to give it a go.

Charles Over a year ago

You can accept your own answer if it solved your problem, so that people will know it works.

Trevor Karjanis Over a year ago

I've addressed the new approaches in an SO answer.

Sumit Parakh · Accepted Answer · 2020-03-01 15:30:13Z

0

You're unnecessarily complicating it. You don't need to use any third party library or utilize script like prestart to watch the changes.

Here it is explained that how to make angular app watch for changes in angular library and update itself.

Here is the working github repo:- https://github.com/sumitparakh/ng-lib-watch

edited Mar 1, 2020 at 15:30

answered Mar 1, 2020 at 14:50

Sumit Parakh

1,1639 silver badges19 bronze badges

6 Comments

Ethan Vu Over a year ago

This does not work, angular throw compile error as this question mentioned.

Sumit Parakh Over a year ago

@Ethan. Only running "ng build lib" will of course delete dist folder every time. You need to run it with watch option so that it doesn't delete it every time. There is a working github project mentioned in the above article. Just have a look at it and let me know if you still face any issue.

Ethan Vu Over a year ago

it worked when linked and use npm to install it for one lib, thanks, i upvoted. But since it not a personal project and the libs will increase, so i still need utilize scripts as mentioned because including something like "lib-1: [file path], lib-2:[file path]" into package.json is really bad for deployment since we have multiple environement: Dev, QA, Prod, Preprod.

Sumit Parakh Over a year ago

Well. Yeah, in that case you might have to write custom scripts to maintain that for multiple environment

Benjamin Over a year ago

This repo also does not seem to work when editing a SCSS file for a library component (rather than editing styles directly in the .ts file). The CLI throws WARNING in Emitted no files.

|

Johan Ehlers · Accepted Answer · 2022-08-29 08:16:49Z

I created the following bash script for a similar situation, I currently have two libraries, core-lib and another library goal-library (that depends on core-lib). And if I just start them all at the same time it does not work, so my script checks for the package.json file each library produces before it starts the next library build and watch in the background. Before finally starting the app in the foreground (user-app):

#!/bin/bash

cd $(dirname $0)

if ! which npx > /dev/null
then
    echo "Missing npx, do you have node on the path?"
    exit 1
fi

rm -Rf dist

for project in core-lib goal-library
do
    echo
    echo --
    echo -- Build and watch $project ...
    echo --
    echo
    npx ng build --project $project --watch &
    while ! [ -e dist/$project/package.json ]
    do
        sleep 1
    done
done

echo
echo --
echo -- Serve and watch user-app ...
echo --
echo
npx ng serve --project user-app

Collectives™ on Stack Overflow

Angular build watch for multiple libraries and and serve to another app

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related