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
• [email protected]
• [email protected]
• [email protected], 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.

[joachimprinzbach]

@TheLarkInn: Hey Sean, ever seen something like this?

[jvandemo]

@filipesilva, @joachimprinzbach — Just fo confirm that I am seeing the same behavior here (on Mac).

Setup:

1. generate library using generator-angular2-library in directory my-lib
2. in my-lib, run gulp to build my-lib/dist
3. in my-lib/dist, run npm link
4. generate app with Angular CLI in my-app
5. in my-app, run npm link my-lib
6. import my-lib in app.module.ts
7. in my-app, run ng serve --aot

Scenario:

1. change file in my-lib/src
2. gulp will pick up change and regenerate my-lib/dist
3. ng-serve --aot detects a change and recompiles successfully
4. the web page does not reflect the change

Learnings so far:

1. files in my-app/node_modules update correctly
2. angular-cli does seem to detect the change and runs a compilation, but the output does not reflect the change
3. running ng serve instead of ng serve --aot shows the change correctly

I will perform some additional research before work later this week 👍

Watch recording to see it happening live on screen

[filipesilva]

Hm, I wonder why some users didn't see it in OSX then... and I should add that for me, on Windows, ng serve did not update (I didn't need --aot to repro).

[goekaypamuk]

I had similar issue with angular/cli 1.0.6.

-update were not always reflected
-I needed to shut ngServe down to get the updates
-Compilation time took sometimes too long (1min)

what worked for me was downgrading to version angular/[email protected]

i would recommend trying different service releases out the find a good working match of different libs.
by the way, i am using node v7.10.0

npm uninstall -g @angular/cli
npm chache clean
npm install -g @angular/[email protected]

[synctom]

hi, does anyone have a solution for this problem?

I have the same issue here. Working on
macOS Sierra 10.12.5.
@angular/[email protected]
node v8.1.2

This problem has obviously nothing to do with @jvandemo generator (great work btw).

try add a new method / property to a services, provided by a dependency lib linked to your cli-project, while both build-chains are listening for changes.
dependency lib and cli project will rebuild as expected but if you try to call this new method within the cli-project it will crash.

Method 'doSomething' does not exist on type 'MyService'

if you ng serve the cli-project again it works.

Can anyone reproduce this?

[goekaypamuk]

hi tom, which editor are you using? Am 23.06.2017 16:30 schrieb "Tom" <[email protected]>:

…

hi, does anyone have a solution for this problem? I have the same issue here. Working on macOS Sierra 10.12.5. @***@***.*** node v8.1.2 This problem has obviously nothing to do with @jvandemo <https://github.com/jvandemo> generator (great work btw). try add a new method / property to a services, provided by a dependency lib linked to your cli-project, while both build-chains are listening for changes. dependency lib and cli project will rebuild as expected but if you try to call this new method within the cli-project it will crash. Method 'doSomething' does not exist on type 'MyService' if you ng serve the cli-project again it works. Can anyone reproduce this? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#6195 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APx6Y2JE9baoh-qDxUgvRbPBrqvO3Xc0ks5sG8wAgaJpZM4NR67M> .

[synctom]

VS Code Version 1.13.1

[goekaypamuk]

hi, I think the cause can be vs code editor. Can you try to make changes with the normal textedit and look if the changes get updated? vs code has its own build in file watch mechanism and this can be likely to clash with webpack's filewatch. 2017-06-24 0:28 GMT+02:00 Tom <[email protected]>:

…

VS Code Version 1.13.1 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#6195 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APx6Y8ZIxamd782Mnd3ttxXjQnoJ0En7ks5sHDwdgaJpZM4NR67M> .

[synctom]

nice idea, but no, same behaviour if i use vim to edit my dependency lib.
i think the problem isn't the watch, because both the build setups get triggered correctly if i change a symlinked dependency.

what i also learned is that i can change property values or remove methods of a service provided by a linked dependency lib. But if i add new stuff, a new property for example, then my ng-cli app doesn't know about it. unless i restart the build process.

[tanyagray]

@synctom did you ever find a solution to this? We are seeing the same issue in our project but can't pinpoint the cause.

[tanyagray]

Same issue here, using npm-linked module in an angular app. The module is a plain typescript module with no angular dependencies. It uses tsc to produce a dist folder containing index.js and index.d.ts. The package.json specifies these as main and types.

Repro steps:

• create new npm package my-package which exports Test
• create new angular app my-app
• use npm link to link package into the app
• in app, import { Testing } from 'my-package'
• run ng serve (fails: export is Test not Testing)
• change my-package export Test to Testing
• angular app rebuild is triggered, but has error:

ERROR in [...]/linked-lib-test/src/app/app.component.ts (2,10): Module '"[...]/linked-lib-test/node_modules/linked-lib/dist/index"' has no exported member 'Testing'.

File under node_modules/linked-lib/dist/index.js clearly does have an exported member Testing.

Stopping ng serve and then running it again results in a successful build.

[synctom]

hi @tanyagray, unfortunately the issue still remains. angular cli is utilizing webpack to resolve module dependencies and build bundles. i believe the problem is somewhere in there.

In addition, the title of this issue is kind of misleading.
this problem isn't limited to ui changes.

looks like some kind of caching issue during module resolution.

[wmbch]

I have tried the solution of @sunew exactly step by step (on Windows, with mklink instead of ln) but the update/refresh behavior (while ng serve) does not work.

@julien-arhs @ebrehault Do you also use Mac like @sebastian-man ? Is it just a Windows thing?

[julien-arhs]

I use a Mac os 10.12.6.
Did you also try to link you src folder using npm link as explained by @sebastian-man ?
And don't forget to use the ng serve --preserve-symlinks or set it as default in angular-cli.json

"defaults": {
    "styleExt": "scss",
    "component": {},
    "build": {
      "preserveSymlinks": true
    }
  }

[ebrehault]

For me, it works on MacOSX and Ubuntu.

[wmbch]

@julien-arhs I have defined --preserve-symlinks in the angular-cli.json.
In this case I did not use npm link. The using of npm link as described in my inital post here would bring the same problem and in the end to set own soft links manually seems to be the same as npm link does.
Or do you mean I shall use the manual softlink declaration AND npm link the same time?

@ebrehault Thanks.

[julien-arhs]

Both methods worked for me. But the npm link method to link the library in the /node-modules folder of the project is the better way to do it imo.

As said by @sebastian-man :

in your-library place a package.json under src/ but without entries in dependencies
in your-library goto src/ and type npm link
goto your project and type npm link your-library

[wmbch]

@julien-arhs What does "worked for me" means in your case? Just to consume the library in the CLI App? Or even more the code refresh when library code changes when running the CLI app with ng serve?

[julien-arhs]

Also the code refresh.
I've built my lib using this generator https://github.com/tinesoft/generator-ngx-library:

• I run the gulp task to watch/re-build the lib.
• The served consuming app is refreshed with changes.

[sgunapude]

Windows:10, Library generated by generator-angular2-library. Linked dist dir inside lib using npm.

1. Angular Cli: 1.4.2
   Run cmd: ng serve --preserve-symlinks
   when lib changes, cli detects changes, browser does NOT reflect changes.

2. Angular Cli :1.2.7
   Works as expected.

I then ejected webpack from cli 1.4.2 setup using ng eject.
Added ngtools/webpack to package.json

ngtools/[email protected] works.
ngtools/[email protected] fails. This coincides with 1.3.0 release of angular cli and the introduction of --preserve-symlinks?

I cannot figure out what has changed between ngtools/webpack 1.6.0-rc5 and 1.6.0 ?

I am using cli 1.2.7 for now.

[txinfo]

After spending some time investigating this issue I found the following solution for linking angular libs by source. Some has already been outlined above but this is the summary:

• run npm link from the source directory of your library
• run npm link <libname> from the root of your consuming application
• add the following to the tsconfig.json or tsconfig.app.json of your consuming application:
  "include": [ "../node_modules/<libname>/**/*", "**/*"]
• add the --preserve-symlinks option to either the ng serve or ng build commands

This should fix the compilation errors. You may notice that during ng serve the file watcher in angular-cli/webpack doesn't trigger a recompile from library source file changes. This is due to the --preserve-symlinks flag not propagating to the webpack file watcher. I have opened an issue here: webpack/watchpack#61 Essentially you need to open the node_modules\watchpack\lib\DirectoryWatcher.js file in your consuming application and change followSymlinks from false to true.

It is not ideal as you need to hardcode paths to the tsconfig.json file but its the best solution i could find apart from messing around with copying lib code into the source tree or using external commands to manage links/junctions.

[petersalomonsen]

What works for me is to consume the library when compiled separately by ngc --watch, and not let the host app compile the library. ng serve in the host app still picks up changes made by the separate library compilation process. Have to use the preserveSymlinks option as said here to avoid duplicate instances of common libraries from node_modules, but otherwise no need to configure anything extra tsconfig.json of the consuming app.

My solution is implemented in my own experimental library packager ngmakelib, and some notes about linking / watching can be found here:

https://github.com/fintechneo/ngmakelib/blob/master/README.md#watch-mode-during-development

[mgechev]

Can you still reproduce this issue?

[synctom]

Little late for the party, but...

if anyone still has issues of that kind, try angular cli.
The "library" schematic (called by ng g library) will generate a nice, clean and official solution for building external libraries.

And yes, also supports watch mode out of the box.

learn more:
https://github.com/angular/angular-cli/wiki/stories-create-library

[MadJlzz]

Yeah I remembered watching this ticket when I had to build external libraries with a third party tool like ngPackagr. With angular cli, I think this has now no reason to live. (at least for the next versions of cli)

[ToniaDemchuk]

I am using new angular cli and library schematics, but still can reproduce the issue(((
I am building the library with ng build lib-name --watch , install library from local folder, and run main application with ng serve with preserveSymlinks.

[synctom]

@ToniaDemchuk did you enable resource-inlining in tsconfig.lib.json?

"angularCompilerOptions": { "enableResourceInlining": true }

[ToniaDemchuk]

@ToniaDemchuk did you enable resource-inlining in tsconfig.lib.json?

"angularCompilerOptions": { "enableResourceInlining": true }

@synctom Yes, I did

[alan-agius4]

Can you kindly provide the output of ng version?

[ToniaDemchuk]

Angular CLI: 7.1.4
Node: 8.11.3
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/cdk 7.2.0
@angular/flex-layout 7.0.0-beta.22
@angular/material 7.2.0
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
ng-packagr 4.4.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1

[alan-agius4]

I'm sorry, but we can't reproduce the problem.

Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[sparebytes]

😃 I was able to solve my issue. I'm not using any npm/yarn/lerna linked packages. Instead I'm just using tsconfig.json paths. All of my shared libraries are imported from @shared/.... The key to getting change detection working for shared libraries was to set the baseUrl and rootDir to the parent folder of my shared folder.

File Structure:

- api
- shared
- ui
  - angular.json
  - src
    - app
      - tsconfig.app.json
    - tsconfig.json

tsconfig files:

// ui/src/tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "../",
    "rootDir": "../",
    "outDir": "./dist/out-tsc",
    // ...
    "paths": {
      "@ui/*": ["./ui/src/app/*"],
      "@shared/*": ["./shared/*"]
    }
  }
}

// ui/src/app/tsconfig.app.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app"
  },
  "include": [
    "./**/*.ts",
    "../../shared/**/*.ts"
  ],
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "../../api/**/*.ts"
  ]
}

I'm on Angular 7.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}