ng serve - npm linked library changes(updates) are not reflected in UI

[tirnovanuaurel]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.0.1
node: 6.10.1
os: darwin x64
@angular/common: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.1
@angular/compiler: 4.1.1
@angular/compiler-cli: 4.1.1

macOs Sierra 10.12.4
Node: v6.10.1
Npm: 3.10.10

Repro steps.

• Generate 'myProject' with angular-cli
• Add a private npm package: npm install @private/etcPackage --save (it's a angular4 library)
• Go to the private package local path and 'npm link'
• Go to 'myProject' and run: npm link @private/etcPackage
• Delete 'node_modules' from 'myProject/node_modules/@private/etcPackage'
• start serve: ng serve --aot
• on library project, '/localpath/etcPackage' run gulp (this will trigger watch and build on change)

Since this dist folder it's linked with node_modules one in my angular project 'myProject' for every build the package is update.

The log given by the failure.

Doesn't update UI on changes.

Desired functionality.

When the library (etc - in our case) it's compiled along with it's resources, the angular-cli project should see the changes and update the UI. Eg: external html templates and css - not updated.

Mention any other details that might be useful.

• I'm using templateUrl: 'etc.html' and not have any template inline;
• If any change is made to componentName.ts file - this is reflected on screen (eg: variables);
• Changes exist after library it gets build in 'myProject/node_modules/@private/etcPackage' folder, so link it's working;
• Even if i refresh page, and I check main.bundle.js - changes are there compiled, but still are not visible on screen unless I stop serve and start it again.

--

Question is, anything can be done or need create a separate watch script to support both the library and myProject?

[filipesilva]

The reproduction of this issue is highly dependent on the build process you're using for your library. Can you provide a runnable repro we can look at?

[joachimprinzbach]

I do have kind of a similar problem and tried to create a simple example that hightlights it.

Libraries used:

• AngularCLI to create the project (https://github.com/angular/angular-cli) -> Version 1.0.3
• generator-angular2-library to create the library (https://github.com/jvandemo/generator-angular2-library) -> Version 10.1.0

Dev Environment:

• Windows10
• npm@3.10.10
• node@6.10.0
• IntelliJ@2017.1.2, one separate window for each project

Projects used:

• https://github.com/joachimprinzbach/cli-project (for the root project created with cli)
• https://github.com/joachimprinzbach/angular-library (for the library, created with the yeoman generator)

Steps to reproduce:
Clone the two mentioned repositories

In angular-library:

• npm install && npm run build
• cd dist && npm link

In cli-project

• npm link angular-library
• npm install
• npm start

Open App in Browser - you should see "Sample component 2" as the second heading.

Go back to the angular-library project.

• npm run build:watch
• Change the template of the fiel "sample.component.ts" in the src folder (e. g. remove the word "sample"

It is getting recompiled directly by gulp, the dist folder is updated correctly.
In the cli-project, the content of "node_modules/angular-library/index.js" got also updated correctly.
However, the cli does not recompile, therefore the browser will not reload either.
Restarting the cli with ng serve will then make the change finally visible.

Expected behaviour:
CLI starts recompiling when some npm linked module in the node_modules directory changes

[joachimprinzbach]

Fun fact: Cannot reproduce on macOS Sierra 10.12.4

[danwulff]

Was able to reproduce using the @joachimprinzbach 's projects on:
Windows 10 OS Build: 14393.1198
Node: v6.10.3
with @angular/cli v1.0.3

Interestingly enough though: ng build --watch within the cli-project correctly sees changes to the library and rebuilds properly.

[phmello]

I recently started using the cli on windows, I'm having the same problem, to the point that I have to restart the server every other change.

Fun fact, this doesn't happen on Mac

[filipesilva]

Hey I think I know what's going on... that generator was based on a WIP starter of mine (https://github.com/filipesilva/angular-quickstart-lib), and I ran into this problem last week while making the linked lib docs (#6292).

Turns out you cannot delete dist/ as this breaks the link (at least on windows). I updated my starter to reflect that, but the yeoman generator still deletes dist.

I opened an issue in jvandemo/generator-angular2-library#91 to have it fixed.

Also, big kudos to @joachimprinzbach for the awesome repro. Once I saw the setup I instantly knew what was going on. Detailed repros rock 🤘

[joachimprinzbach]

@filipesilva I have also seen that problem when I deleted the dist folder. The cli recognizes the change and the build brakes. This is a bug in the generator.

However, if you follow my steps in the same order as mentioned (build the library first, then start the watch task) - the problem is different. The library content gets correctly updated in the apps node_modules folder, the link works just fine. The only problem is, that the cli does not recognize the change. No recompilation happens, not even an error. The webpack-dev-server might be the problem?

[filipesilva]

@joachimprinzbach are you sure it's different? The watch task calls compile, which in turn calls clean:dist. That would mean it causes the same problem. Regardless, I'm going run through it to see.

[filipesilva]

You're right, something else is at play here. I followed everything and could see a refresh, node_modules content would reflect it, but the webpage would not change.

I also saw an error after a bunch of refreshes:

webpack: Compiled successfully.
webpack: Compiling...
Hash: b9005ad7c696c1f77702
Time: 7041ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {4} [initial]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 4 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]

ERROR in ../angular-library/dist/index.js
Module build failed: Error: ENOENT: no such file or directory, open 'D:\sandbox\angular-library\dist\index.js'
    at Error (native)
 @ ./src/app/app.module.ts 12:0-47
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

[filipesilva]

I think this this is caused by several files being deleted and regenerated at the same time. If you delete 'clean:dist', from line 173 and 182, refreshes work fine.

Now I'm not sure this is a CLI/Webpack problem. Is it reasonable to expect the build system to figure out that deleted JS modules are going to come back in a split second?

Maybe it is reasonable, and this problem has already been solved in Webpack somehow. Or maybe Webpack cannot deal with this. I don't know at the moment.