Possibility to "live-develop" the library using the demo app

[mscudlik]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Generator Version

4.1.1

Desired functionality.

First of all, thanks a lot for this great generator 👍

There is one feature which is missing i think:

I want to develop the library and immediately see the results in the demo app without having to build the library again and restarting the demo server.

I linked the library with gulp link and ran npm install (which runs npm link to the library).
Then i ran gulp build for the library and gulp serve:demo
If i now change a component of the library, i have to run gulp build and restart the server for the demo page again, in order to see the results.

There is a gulp watch tasks which compiles the library again, but it is not bundled in the dist folder and the demo app also does not detect that it changed or did i miss anything?

Thanks a lot and best regards,
Matthias

[tinesoft]

Hi @matthiasscudlik

I heard you and just released v4.2.0. New tasks gulp build:watch and gulp build:watch-fast should make your ng library-authoring life easier now 😎

Enjoy!

[mscudlik]

That was fast, unfortunately i still have some issues with this:

• neither gulp build:watch nor gulp build:watch-fast perform an initial build, so you have to run gulp build first which is kind of cumbersome
• the bigger issue is that the demo app still doesn't recognize changes in the library

[tinesoft]

Hi,

neither gulp build:watch nor gulp build:watch-fast perform an initial build, so you have to run gulp build first which is kind of cumbersome

You are right 👍 , i will add an additional check to build the library if not already done.

the bigger issue is that the demo app still doesn't recognize changes in the library

What do you mean? do you have demo app running (gulp serve:demo) and build watching activated (gulp build:watch) by running in separate terminals? Cause i tried that and it is working fine... Angular-Cli automatically recompiles the app when building is over... See below:

[mscudlik]

Thanks a lot for the quick changes and replies 👍, i'll try to explain what i'm doing and why:

I have 2 terminals open, one with gulp build:watch-fast and one with gulp serve:demo

Now if i change anything within the demo, then the demo app is recompiled and i can see changes of the demo app immediately.
If i change anything within the library, the library is recompiled, but the demo app is not recomipled.
So in order to see the changes done in the library within the demo app, i need to restart the demo server manually.

I want to archive that i can see changes of the library immediately in the demo app.

Maybe my setup is wrong? i ran gulp link from the root folder and npm install in the demo folder, both operations run npm link commands.

I think the root cause is that the demo app uses angular cli which only listens to changes of the demo app itself, not of the libraries used by the demo app. This is probably hard to archiev but would be very helpful to develop the library and immediately see the results in the demo app.

Thanks a lot and best regards,
Matthias

p.s.: i think i'd also remove the linting from gulp build:watch-fast

[tinesoft]

If i change anything within the library, the library is recompiled, but the demo app is not recomipled.

That's what i don't understand..., when the library is rebuilt while demo app is running, it is similar if the dependency in demo app was updated, and angular CLI DOES recompiles the entire demo app in this case, as you can see on my screenshot.

I think the root cause is that the demo app uses angular cli which only listens to changes of the demo app itself, not of the libraries used by the demo app.

Angular CLI does listen do changes in vendors packages (i.e dependencies in demo/node_modules/)

What OS+Version are you on? Node version? Npm/Yarn version?

When is the output of gulp link?

[mscudlik]

Tried it several times now but still doesnt work :(

$ gulp link
[10:07:28] Using gulpfile ~\git\bar\gulpfile.js
[10:07:28] Starting 'link'...
C:\Users\***\AppData\Roaming\npm\node_modules\@foo\bar -> C:\Users\***\git\bar\dist
[10:07:33] Finished 'link' after 5.01 s

Windows 10
Node 6.11.4 (latest LTS)
Npm 3.10.10
Yarn 1.1.0

Yo 2.0.0
generator-ngx-library 4.2.0

I also tried it with a brand new project with the same result (check the timestamps):

[tinesoft]

Hi @matthiasscudlik

I don't think the livrereload issue has to do with the generator itself, but rather with you installation of angular cli. So you may find better help on their issues tracker. See this thread for example:

• ng build and ng serve not detecting file changes angular/angular-cli#2356

Things you could try:

• remove spaces and special characters from all root directories of project directory(inclusive)

If path already clean and/or it's still not working, try a fresh re-install of the CLI:

• npm cache clean (clear the cache)
• npm uninstall -g @angular/cli
• npm install -g @angular/cli

[mscudlik]

I discovered that the livereload when i use ng serve without --preserve-symlinks in the demo folder.

But without --preserve-symlinks the library is not referenced correctly so the app doesnt work.

I think this issue is related to it:

angular/angular-cli#6482

and

angular/angular-cli#6195 (comment)

[tinesoft]

Ok,

Thanks for the links.
I subscribed myself to those threads, we'll see how the problem get resolved.

[dharapvj]

Hello,

Some other library posted that the solution using ng-packagr works fine (and it does not involve npm link)

But I love your generator more.. So do you think you can adapt ng-packagr's way of fixing this issue.