"ng serve" live development does not detect file changes

[ManfredSteiner]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

Output from: ng --version.

@angular/cli: 1.4.9
node: 8.7.0
os: linux x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.5.3

Repro steps.

Newest ng version 1.4.9 does not detect file changes. When switching back to recent version (1.2.6), everything works as desired.
Recent version:

@angular/cli: 1.2.6
node: 8.7.0
os: linux x64
@angular/animations: 4.3.2
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.2
@angular/language-service: 4.3.2

The log given by the failure.

Desired functionality.

rebundling if file changes

Mention any other details that might be useful.

ng version 1.4.9 prints the following warning (but appplication itself is working without problems)
Using this version can result in undefined behaviour and difficult to debug problems.

Please run the following command to install a compatible version of TypeScript.

    npm install typescript@'>=2.1.0 <2.4.0'

[ManfredSteiner]

The failure becomes more strange. I was working with old ng version 1.2.6 up to now (because it does not cover the problem), and suddenly the same problem occurs with this old version. Nothing installed or changed on packages in the meantime. I switch back to the newest ng version 1.4.9, and surprise, it works. Yesterday it does not work...

Is there any information how this LIVE mechanism works? Maybe some file time stamps which cause this problem?

[filipesilva]

I'm not aware of this problem existing currently. There's a long standing issue where reloads can fail to occur with a lot of possible causes (#1610), have you checked if that's your case?

Either way if you think it's related to a version update, can you setup a minimal repro please? You can read here why this is needed. 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. Please include all steps, and be very specific (which file to edit etc).

[ManfredSteiner]

@filipesilva, Thank you for response. I have checked #1610, but I did not find any suspect file names in my project. The project has a lot of files, and the failure behaviour changes from time to time which makes it hard to determine the root cause. At the moment (v 1.4.9) I see that change on most of files are detected proper, but then suddenly, changes on one html file is not detected. When I restart ng serve everything works as desired...
Also switching back to v1.2.6 now works without problem, some hours in past I had problems with this version.
So what to do? I will proceed and observe effects, maybe I can see any pattern...
As soon as the problem occurs continuously I will start working through the issues of #1610.

[steveschmitt]

@ManfredSteiner could it be due to #8022 ?

[ManfredSteiner]

@steveschmitt, No, there are no errors on typescript files. I have also observed that behavior in the past sometimes. In that case I stop ng serve and restart it again.

[ManfredSteiner]

@filipesilva, I have the problem again with newest version v1.4.9. No file changes are detected (I try several files). Now I have checked #1610 and did increase fs.inotify.max_user_watches (I am working on Ubuntu 16.04 system) with:

sudo echo 131072 >> /proc/sys/fs/inotify/max_user_watches

After restarting ng serve file changes are detected. I will leave this issue open at the moment, looking if that is really all to do...

[suparnavg]

Facing the same issue with Angular CLI 1.4.9 on Windows 10. More details below. Is switching back to 1.2.6 as @ManfredSteiner helpfully pointed out the only current solution?

Something else I observed... If i run ng serve without ng build, the "dist" directory in my app vanishes, then the app throws an error as a required file is located in there. So to test the app, I'm currently doing ng build & ng serve & nodemon server.js (every time I want to see changes).

@angular/cli: 1.4.9
node: 6.11.4
os: win32 x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Thanks!

[Splaktar]

I am seeing this sometimes as well. It usually happens when I change a model file. I was hitting #8022 as well, but sometimes the watch stops even w/o a TypeScript error.

[fuadhaider]

In my case only one component was having this problem, not detecting its code changes, rest of the app was ok.

I solved it by generating a new component, copy-pasted all codes from the previous into new, deleted the old one and renamed the new after the old component.

Now it's up and running but prior to this, I've tried to figure it out with the help of all the posts on the net, but couldn't. Don't have a clue what went wrong.

[taewdy]

I solved this issue from this link.

https://stackoverflow.com/questions/48092880/ng-serve-not-detecting-file-changes-automatically

I needed to use sudo ng serve.

The problem happened after I upgraded to ng cli 1.6.3 and package manager to yarn.
I don't know which actually was the cause.
I'm just guessing one of above may have created files in privileged folder.
So, with just ng serve cannot detect file changes there.

also
ng serve --poll=2000 works

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

[jmchaves]

Angular CLI: 1.5.0
Node: 8.2.1
OS: linux x64
Angular: 5.0.1

Using sudo ng serve, it's working for me now.

[Halt001]

I have the same problem on Windows, so far it only seems to affect one file. I need to stop ng serve and start it again to get it to pick up the changes once, after that it is ignored again.

Angular CLI: 1.6.3
Node: 8.4.0
OS: win32 x64
Angular: 4.4.6

Since I'm on Windows sudo is not going to help me

[youssefgh]

Same here :
Angular CLI: 1.6.5
Node: 8.9.4
OS: linux x64 (Ubuntu 17.01)
Angular: 5.2.1
Workarounds like : sudo ng serve and ng serve --poll=2000 work fine

[aminebarrima]

for people who use Windows
the command ng serve --poll = 2000 works too.
except that I noticed a slowness in the build level after applying this
person have any idea ?

[vaibhavphutane]

This worked for me on ubuntu 16.04
sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

[dungahk]

I know this may sound weird, but I solved it by stop using vscode workspaces, I was using it and serving the angular application using the integrated terminal, when I opened up only my project folder, it worked again.

[ghost]

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

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

[will-janz]

I'm running across the same issue with a relatively small app. Upping max inotify user watches fixed it for me as well. The odd thing is, running lsof | grep inotify | wc -l to count the number of watched files total returned well below the default limit (showed ~2500 with ng serve and ng test running).

ng -v:

Angular CLI: 1.7.4
Node: 8.9.4
OS: linux x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/material: 5.2.5
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

[ghost]

I solve the same problem using:

Angular CLI: 1.6.1
Node: 6.9.0
OS: linux x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

angular/cdk: 5.2.5
angular/cli: 1.6.1
angular/material: 5.2.5
angular/upgrade: 5.2.6
angular-devkit/build-optimizer: 0.0.42
angular-devkit/core: 0.4.9
angular-devkit/schematics: 0.0.52
ngtools/json-schema: 1.1.0
ngtools/webpack: 1.9.1
schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

[opahopa]

Hi i also run into this problem.
It was working after intial bootstrap, however after i reinstalled my OS & bootstrapped the app by npm install - ng serve & ng serve --watch does not detect changes anymore.

package.json:

{
  "name": "someproj",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.4",
    "@angular/cdk": "^6.2.1",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.2.1",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@types/socket.io-client": "^1.4.32",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.3.5",
    "@types/webpack-env": "^1.13.6",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

i tried to use global node installation and nvm installation. with node v10.5 & 10.6

[filipesilva]

This issue looks like the exact same as #1610. That other one contains a lot more information on this topic so I'm closing in favor of it.

[Manoj-Manjunatha]

I know this may sound weird, but I solved it by stop using vscode workspaces, I was using it and serving the angular application using the integrated terminal, when I opened up only my project folder, it worked again.

Yes, even I tried it without VsCode in my Linux machine, it actually works, this is due watchers limit in VSCode as explained in this link - https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

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