Angular CLI devserver doesn't properly watch files on Linux

[juristr]

Versions

 _                      _                 ____ _     ___
  / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
 / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
              |___/

Angular CLI: 1.6.5
Node: 9.5.0
OS: linux x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack: 3.10.0

Repro steps

• Use a fresh Angular CLI project
• Execute ng serve
• Make a change in a TypeScript file file

Observed behavior

Nothing happens, the change is not visible on the served port localhost:4200.

Desired behavior

As usual, the devserver should pick up the change and recompile the TypeScript files.

Mention any other details that might be useful (optional)

Upon installation of the npm packages the following warning appears:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Also, as a workaround for now adding the poll flag seems to work

$ ng serve --poll=1000

---

This issue seems related to #8168 & maybe to #9572

[KristijanZic]

I'm submitting a...

[x ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

fsevents module seems to have dropped support for linux or has a bug. Makes the whole development of angular apps not worth doing because you gave to not only refresh the browser to make changes visible but restart the server.

`$ ng update
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 8.323s
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 8.274s
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 8.222s
`

`$ npm install -g fsevents
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/bcrypt-pbkdf):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/aresminos/.nvm/versions/node/v9.6.1/lib/node_modules/fsevents/node_modules/bcrypt-pbkdf/package.json.3112397591'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/tweetnacl):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/aresminos/.nvm/versions/node/v9.6.1/lib/node_modules/fsevents/node_modules/tweetnacl/package.json.1302490447'

npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! notsup Valid OS: darwin
npm ERR! notsup Valid Arch: any
npm ERR! notsup Actual OS: linux
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR! /home/aresminos/.npm/_logs/2018-03-11T20_12_02_077Z-debug.log
`

Expected behavior

Installs fsevents module

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

 
For Tooling issues:
- Node version: XX  
`$ node --version
v9.6.1
`
- Platform:  
`$ screenfetch
                          ./+o+-       $USER@desktop
                  yyyyy- -yyyyyy+      OS: Ubuntu 16.04 xenial
               ://+//////-yyyyyyo      Kernel: x86_64 Linux 4.13.0-36-generic
           .++ .:/++++++/-.+sss/`      Uptime: 31m
         .:++o:  /++++++++/:--:/-      Packages: 2267
        o:+o+:++.`..```.-/oo+++++/     Shell: bash 4.3.48
       .:+o:+o/.          `+sssoo+/    Resolution: 1680x1050
  .++/+:+oo+o:`             /sssooo.   DE: Unity 7.4.5
 /+++//+:`oo+o               /::--:.   WM: Compiz
 \+/+o+++`o++o               ++////.   WM Theme: Ambiance
  .++.o+++oo+:`             /dddhhh.   GTK Theme: Ambiance [GTK2/3]
       .+.o+oo:.          `oddhhhh+    Icon Theme: ubuntu-mono-dark
        \+.++o+o``-````.:ohdhhhhh+     Font: Ubuntu 11
         `:o+++ `ohhhhhhhhyo++os:      CPU: Intel Core i5-2400 CPU @ 3.4GHz
           .o:`.syhhhhhhh/.oo++o`      GPU: Radeon RX Vega
               /osyyyyyyo++ooo+++/     RAM: 2879MiB / 3928MiB
                   ````` +oo+++o\:    
                          `oo++.   `

Others:

`$ ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.7.1
Node: 9.6.1
OS: linux x64
Angular: 
...
`

[filipesilva]

Is this still a problem with recent Angular and CLI versions?

[j2L4e]

Yes. It see it happen regularly on files generated by graphql-codegen (generates interfaces and more from graphql documents).
The change won't be picked up unless I open the file in the editor and re-save it. I think graphql-codegen doesn't actually change the file but deletes and recreates it (unconfirmed). Could that be causing the problem?

Angular CLI: 8.3.9
Node: 12.10.0
OS: linux x64
Angular: 8.2.3

[filipesilva]

@j2L4e I think that situation is expected-ish, I've seen webpack have trouble with whole dirs being recreated in the past. I'm not sure what the semantics there should be either really... if a bunch of files are recreated the order of creation would probably matter, as they can be importing each other. Webpack tries to wait a bit and batch file changes but it might not get all of them at once in a reload. File system events are also not that accurate, which makes the batching harder.

The originally reported problem of a default source TS file in a new CLI app not updating the browser was more worrisome though.

[j2L4e]

Understand. Thanks!

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[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.}