Angular-cli: ng serve not detecting file changes

[harilalinapp]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   ubuntu 16.04
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.16
   node: 6.6.0
   os: linux x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   created new project nothing changed only changed the title
4. The log given by the failure. Normally this include a stack trace and some
   more information.
5. Mention any other details that might be useful.

While updating the source files the build is not auto updating the app

---

Thanks! We'll be in touch soon.

[paillave]

I face the very same issue except that my angular-cli version is 1.0.0-beta.15.
It used to work in a previous version on the same computer

[dagilleland]

Same here on
OS: Windows 10
angular-cli: 1.0.0-beta.16
node: 6.6.0

[bonnici]

Maybe a duplicate of #2356 - does the path to your project folders include a space?

[harilalinapp]

@bonnici no the path doesn't have any space or special character. The path is /home/harilal/works/ng2/routing/

To my wonder after removing global angular-cli and removing the nod-modules and reinstalling after cleaning the cache it worked. I need to check whether it will work next time.

[paillave]

At my side, I found the issue: the system that detects changes (inotify) can't handle so much watches by default.
To change the amount of watches it can handle (=the maximum amount of files that will be in the project) you must run this command:
echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
The problem with inotify is reseting this counter every time you restart your computer.
In the previous version, there was an alert to tell that the whole project couldn't be observed. So we knew we had to run this command. It's not the case anymore.
Something, somehow, somewhere should be done so that this file detection always works out of the box on linux.

[harilalinapp]

@paillave I think that's solved my issue. Now the project files gets compiled and it's updating. But i need to check after restarting the system. Last time when i reinstalled the angular-cli it's worked. BUt next day it's stopped working. I will update the issue once i have tested that also.

[paillave]

@harilalinapp out of angular 2 app, many have the same issue with inotify, especially on ubuntu: http://askubuntu.com/questions/716431/inotify-max-user-watches-value-resets-on-reboot-how-to-change-it-permanently,
Here is the solution... (dunno it this actually works):
https://bbs.archlinux.org/viewtopic.php?id=193020
or
https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

[harilalinapp]

@paillave Thanks for the support. I have to run the command each time at restart. Anyway it's works thanks.

[ridly]

Thank you @paillave seems to be an issue on Ubuntu and the fix is

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

as highlighted on
https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

[filipesilva]

Closed in favor of https://github.com/angular/angular-cli/issues/1610, linking @paillave's solution there.

[TheCodonist]

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

[llstarscreamll]

@paillave thank you, works fine!!

[shoaib0077]

Same issue,
Angular CLI : 1.0.0-beta.28.3
Node: 7.5.0
OS : Win32 x64

No spaces to app .. here's the path : c:\dev\myapp

I reinstalled node and angular a couple of time but nothing worked.

[raducostea]

I am having a similar issue. Changing a .html file works fine. Changing a .ts file, the compiler fires but on reload there is no change.

[Kaspis77]

Same here as @raducostea when .ts file is changed, the compiler fires, but the Hash (in terminal) is the same as before file change. I use Webstorm 2016.3.3 on Win 7 x64. Also tried to reinstall, set new project.

[raducostea]

Same as https://github.com/angular/angular-cli/issues/4338

[rodrigoEclipsa]

The same happens to me, the html takes the changes but the .ts does not

[titanoz]

I think problem is in WebStorm. Webpack watch doesn't work if the file is not saved directly. Please try turning 'Safe write' option ( Settings | Appearance & Behavior | System Settings | Use "safe write" (save changes to temporary file first)) off. After this change all works fine for me.

[toni8810]

It is a bug in the latest CLI. Execute the following command in your project folder:
npm install --save @ngtools/[email protected]
and
ng serve

And it should work fine

[oosor]

@toni8810 , thank you!

[ba7u]

@toni8810 thank you!

[AshMcConnell]

@toni8810 Thanks! Fixed the problem. I assume we'll want to remove that specific version once the bug is fixed in the next release? Thanks again!

[raducostea]

This is fixed for me in the @angular/cli latest release.

[AshMcConnell]

@raducostea thanks!

[craigpayne]

I've noticed a strange case sensitivity bug.
My casing was incorrect e.g. (export * from './MyHeader'), instead of (export * from './myHeader'). Would compile and render without any errors, but ng serve was not detecting file changes.

[AshMcConnell]

I checked the latest (beta 30) release and it doesn't pick up changes in a lazy loaded shared module without the npm install --save @ngtools/[email protected] fix

[ulymor]

I faced with the same problem on Ubuntu 16.04 and angular CLI 1.0.0-beta.30

The problem was related with Inotify Watches Limit on Linux.
To solve to issue I increased the watches limit to 512K

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

After that I restarted my IDE (WebStorm in my case) and after that the change detection started to work.

[ivanbtrujillo]

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

That fix the problem for me. Thanks @ulymor!

[JochemKuijpers]

My node_modules folder contains 27487 files in total whereas the other source files count to a total of 372. I suspected Webpack was also listening for each file in this library, which is nonsense since they never change.

I was able to fix the issue without having to change my system configuration by changing tsconfig.json to exclude node_modules:

{
    "compilerOptions": {
        ...
    },
    "angularCompilerOptions": {
        ...
    },
    "exclude": [
        "node_modules"
    ]
}

My IDE is also using inotify watches, so I made sure to have it ignore the node_modules directory so it wouldn't use too many inotify watches.

You likely don't want to increase fs.inotify.max_user_watches to half a million.

Each file watcher takes up 1kB of kernel memory (unswappable). Half a million of those watches would take up 512MB of RAM, which no other program can use. The above method might also fix your issue without giving up so many system resources.

[sarcoma]

I had this issue and also found that I was getting a warning from WebStorm about inotify being set to low, It linked to this: https://confluence.jetbrains.com/display/IDEADEV/Inotify+Watches+Limit which has fixed it for me on Ubuntu 16.04

[switch120]

I stumbled onto this issue trying to get the detection working in a Vagrant VM (Ubuntu 16.04). This plugin worked flawlessly for me right out of the box with no additional commands: https://github.com/mhallin/vagrant-notify-forwarder

Hope this helps someone else!

[GopiAnnan]

I have noticed changes detected only on Existing Method or variables, is not detecting new methods and variables. I hope the others also having the same issues.

[alaingoodarzi]

I have same issue,

macOS Sierra
Version 10.12.5
npm 5.3.0
@angular/cli: 1.2.1
node: 8.0.0

Thanks

[Srinivas289]

Got the similar issue,
New methods in ts file not reflected,

@angular/cli: 1.3.2
node: 8.4.0
os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Do any one know the solution?

[briancullinan]

Can anyone other than @filipesilva continue this discussion in another thread? This isn't working. https://github.com/angular/angular-cli/issues/8033#issuecomment-336305650

[thisisajith]

thank you ...

[nitinshk1111]

I am also facing the same issue. ng serve is not getting reloaded when changes made in a particular directory Model. Apart from those Model classes it is detecting the changes..
I ran the command ng --version and got this result..

@angular/cli: 1.3.2
node: 6.11.2
os: win32 x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.3.2
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3

Please help me to fix this issue..

[shilu911]

I am using angular-cli 1.6.3, and having the same issue, but only my directive's code has this problem, I tried to modify the code, remove the code completely, restart my desktop but the ng serve always load the old directive code

[thisisajith]

use npm start it helps me to fix the issue

On Fri, Dec 29, 2017 at 6:39 AM, shilu911 [e-mail] wrote:

I am using angular-cli 1.6.3, and having the same issue, but only my
directive's code has this problem, I tried to modify the code, remove the
code completely, restart my desktop but the ng serve always load the old
directive code

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2389#issuecomment-354383080,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXwY3tbm5dxUWNnuZNi_zNjObrftMmVOks5tFDvigaJpZM4KIrXk
.

--
Thanks & Regards

Ajith

[jeanpaulattard]

I was having this issue recently, when working with webstorm, and to me it was weird and inconsistent. I was changing between v1.6.5 and 1.6.6 to see if 1.6.6 broke something, however I couldn't identify any consistent behaviour...

After researching i found that file watches on ubuntu is handled by inotify, and found this article which helped me solve my issue.

https://confluence.jetbrains.com/display/IDEADEV/Inotify+Watches+Limit

[Charius]

@jeanpaulattard thanks, it helps me with PhpStorm too

[vignesh007vicky]

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

this command works but i have to do every time when system restarts

im using ubuntu 16.04 64 bit

Angular CLI: 1.7.3
Node: 8.9.4
OS: linux x64
Angular:
...
npm :5.6.0
node : v8.9.4

@angular/cli: 1.2.4
node: 8.9.4
os: linux x64
@angular/animations: 4.3.0
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.3.0
@angular/compiler: 4.3.0
@angular/core: 4.3.0
@angular/forms: 4.3.0
@angular/http: 4.3.0
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.3.0
@angular/platform-browser-dynamic: 4.3.0
@angular/router: 4.3.0
@angular/cli: 1.2.4
@angular/compiler-cli: 4.3.0

[owlstack]

I'm having this issue not on Linux but Windows 10 machine and VS Code. Anyone solutions for that platform?

[dragGH102]

same issue with MacOS 10.13.3. After a typescript error fix, most of the time I need to restart angular-cli to force re-compilaton

[luiseggk]

I have same issue,

OS: Linux Mint 18.3 Sylvia
Angular CLI: 1.7.4
Node: 8.11.1
npm : 6.0.0

[salehasadi]

@paillave thanks man you had rescued me :+1: :thumbsup:

[sudhirkumart]

@owlstack @salehasadi @harilalinapp Is this issue resolved in windows? Can someone help? Any help is highly appreciated! Thanks!

[sarvold]

I'm having same issue on Windows 10 and tried exluding the huge node_modules in tsconfig.json, but still shows up old display. I see that the typescript file does not transpile into an updated .js

[vasconce7os]

it's works for me @paillave, I was working with Linux CentOs 7; node -v: v8.11.3; npm -v: 5.6.0

[StatelessCat]

I have the same issue on Kubuntu 18.04, npm 5.6.0, node 8.11.4, Angular CLI: 6.1.5.
I confirm the @vignesh007vicky solution works fine: https://github.com/angular/angular-cli/issues/2389#issuecomment-377191808 , thanks.

[chapultepec]

sudo ng serve works!

[bugtamer]

sudo ng serve works!

Same issue on Linux Mint 19 and it didn't work with Visual Studio Code and nano, Firefox 62 or Chromium 69

• node v8.10.0
• npm 6.4.1
• angular/cli 6.2.4

The @chapultepec solution works for me, so it wasn't a node, npm, browser, editor... problem. Now I remember using sudo ng serve, I just forgot it :sweat_smile:

[TroniPM]

Same here (HTML changes automatically is rebuilded, TS changes nothing happens). I'm using Ubuntu 18.04 with vscode version 1.29.1. @chapultepec's answer works fine for me, but we SHOULD NOT have to do this... Thanks @chapultepec.

sudo ng serve works!

Angular CLI: 6.2.8
Node: 8.10.0
OS: linux x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.8
@angular-devkit/build-angular     0.8.8
@angular-devkit/build-optimizer   0.8.8
@angular-devkit/build-webpack     0.8.8
@angular-devkit/core              0.8.8
@angular-devkit/schematics        0.8.8
@angular/cdk                      7.1.1
@angular/cli                      6.2.8
@angular/material                 7.1.1
@ngtools/webpack                  6.2.8
@schematics/angular               0.8.8
@schematics/update                0.8.8
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.16.4

[lppedd]

Having the same issue with @angular/cli": "^7.2.0"!
Edit: solved by deleting the output directories and invalidating IntelliJ cache.

[Anyoks]

I had the same issue working on Vagrant vm on Ubuntu 16.04 LTS.

Angular CLI: 6.0.8
Node: 11.10.0
OS: linux x64
Angular: 6.1.7

I tried all solutions, increasing notify watches, using --watch reinstalling npm and node. Nothing worked.
This is what solved it for me. adding --poll=2000 like so:

ng serve --poll=2000 --host 0.0.0.0

[switch120]

If you're using Vagrant and the fs-notify plugin doesn't work, I've also had luck explicitly specifying chokidar for polling:

export CHOKIDAR_USEPOLLING=true && ng serve ...

Obviously you can set that environment var anywhere, but for a disposable VM it's quick and dirty to just add it to the npm script.

[breitembach]

Ubuntu 18.04

Delete node_modules and run npm install again.

[jessicapaolam]

@toni8810 Thank you!! :+1:

[angular-automatic-lock-bot[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._}