6

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"
 ...
}
...
Ethan Vu
  • 2,911
  • 9
  • 25
  • Check out my answer here: https://stackoverflow.com/questions/59356732/angular-library-and-live-reload/59706221#59706221 Your question is not the same, but it can help you to move on in this topic. – Milan Tenk Mar 01 '20 at 12:38

3 Answers3

5

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.

Joe H.
  • 147
  • 1
  • 10
  • 2
    There is another approach described at the [Angular-CLI Github](https://github.com/angular/angular-cli/issues/10643#issuecomment-423935700). I haven't tried it yet, but plan to give it a go. – Joe H. Jan 27 '21 at 18:27
  • You can accept your own answer if it solved your problem, so that people will know it works. – Charles Nov 13 '21 at 14:36
  • I've addressed the new approaches in an [SO answer](https://stackoverflow.com/a/71375807/392895). – Trevor Karjanis Mar 07 '22 at 02:21
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

Sumit Parakh
  • 1,098
  • 9
  • 19
  • 1
    This does not work, angular throw compile error as [this question mentioned](https://stackoverflow.com/questions/59356732/angular-library-and-live-reload/59706221#59706221). – Ethan Vu Mar 01 '20 at 15:21
  • @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. – Sumit Parakh Mar 01 '20 at 15:28
  • 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. – Ethan Vu Mar 01 '20 at 16:15
  • Well. Yeah, in that case you might have to write custom scripts to maintain that for multiple environment – Sumit Parakh Mar 01 '20 at 16:25
  • 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.` – Benjamin May 14 '20 at 14:13
  • It says there to run `ng build lib1 --watch`. But where do I need to run it from? From the web app or from the library's `dist` folder? or from the library's `project` folder? – shAkur Apr 02 '21 at 06:35
0

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
Johan Hendrik Ehlers
  • 101
  • 1
  • 6