angular-cli: ng serve not detecting file changes

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.

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

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.

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.

@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

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

And it should work fine

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.

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.

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

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.

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.

sudo ng serve works!

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

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

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!

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/webpack@1.2.4 fix

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

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

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…

thank you …

@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.

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