ng serve not detecting file changes automatically

Question

I need to run ng serve every time when any changes made to the source files.I have no error in the console.

Angular CLI: 1.6.2
Node: 8.9.1
OS: linux ia32
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.2-c3d7cd9
@angular/cli: 1.6.2
@angular/material: 5.0.3-e20d8f0
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Please check my updated answer and let me know if it solves the problem. — planet_hunter, Jan 04 '18 at 10:11

planet_hunter · Accepted Answer · 2020-04-06T09:09:30.947

167

Most of the times in Linux, ng serve or ng build --watch doesn't work if the directory doesn't have sufficient permissions.

The solution is either to provide the necessary permissions or to use sudo instead.

UPDATE

watch flag in ng serve is actually redundant as it is the default option. Credit to @Zaphoid for pointing out the mistake.

edited Apr 06 '20 at 09:09

answered Jan 04 '18 at 10:07

planet_hunter

3,866
1
26
39

1

Then, please accept this as the answer, which will help others who read this question in the future – Mawg says reinstate Monica Jan 04 '18 at 10:39
5

@Mawg Instead of using sudo. Which set of permission the files should have? – oracleruiz May 18 '18 at 01:14
2

Depends on the user which is running, maybe as much as `a+x`, but I warn against using permissions, rather than `sudo`. `sudo` is for a single command, whereas changing permissions changes them forever, which seem a greater security leak. – Mawg says reinstate Monica May 18 '18 at 06:17
1

fkn permissions. Thanks dude! – tarasikarius Sep 25 '18 at 07:58
5

`--watch` shouldn't be neccesary, as it is a default, see https://angular.io/cli/serve. So @T. van den Berg 's answer was actually more precise! – Zaphoid Oct 20 '18 at 17:21
That's a good catch @Zaphoid! The answer was actually targeting both serve & build as people tend to face the same problem in case of `ng build`. However, I completely missed the fact that `ng serve` actually watches by default. Thanks! – planet_hunter Oct 20 '18 at 19:34
1

I gave the directory a+rwx but still has the same issue what is exactly necessary permissions shuold I provide ?! – Tawfiek Khalaf Oct 24 '18 at 23:06
What are the relevant permissions required to grant to the user? Ideally, administrative development should not be done wherever possible. – NitinSingh Jan 16 '20 at 13:04
@MawgsaysreinstateMonica Since ng serve is used almost exclusively for development purposes, I think a security concern shouldn't be much of an issue (if the case is in a prod state, then we need to reconsider) – Dame Lyngdoh Mar 02 '20 at 07:55
Outdated Answer not working anymore 2023 – user1034912 May 03 '23 at 07:01
@user1034912 So `ng serve` is not detecting your changes even after providing necessary folder permissions or using sudo? – planet_hunter May 04 '23 at 10:43

score 154 · Answer 2 · edited Apr 23 '18 at 07:18

154

ng serve --poll=2000

Working fine in linux and windows

edited Apr 23 '18 at 07:18

perror

7,071
16
58
85

answered Apr 23 '18 at 07:00

Dhandapani Loganathan

1,565
1
7
2

27

what does is it mean (--poll) – HD.. Aug 06 '18 at 10:15
4

Can confirm this works. Running linux subsystem on WIndows 10 (Ubuntu) with VS Code running on Windows. – Ales Potocnik Hahonina Dec 27 '18 at 13:27
Works on ubuntu 18.0.4 – Nishan Feb 27 '19 at 12:08
2

That worked on ubuntu 18.04. can you please describe its reason ? – Vijender Kumar Jan 16 '20 at 09:40
3

For me works fine! But, i don't understand the cause "ng serve" don't reload the project. – Gonzaga Neto Mar 22 '20 at 06:29
Working on WIndows7 – Code_Yoga Apr 07 '20 at 10:56
yes great. thanks.. this is also worked for me. i'm using ubuntu 18.04 – nur zazin Apr 12 '20 at 09:15
Works in WSL(Windows 10) – Remy Ticona Nov 26 '20 at 23:58
@HD.. For what it's worth --poll allows for changing the behavior of what filesystem is checked by defining a polling frequency. By default, ng will check "native" which may not work as expected when using WSL1/2, shared file systems, etc. see https://angular.io/cli/serve and https://stackoverflow.com/questions/51930195/what-is-the-function-of-poll-flag-in-cli. – Daileyo Apr 23 '21 at 00:27
Works for me. I'm using Debian GNU/Linux 9 in docker. – hsuchengmao Apr 29 '21 at 10:12
works fine with ubuntu 20.04/windows10 linux subsystem, i tried many solutions, only this one refresh the server correctly on save, i don't know why but its works :) thx you – LinebakeR Aug 13 '21 at 07:29
this one worked for me on elementary OS 5.1 based on Ubuntu 18.04 . i also tried to set the permission as suggested in some ans but didn't work . – ashutosh Mar 06 '22 at 18:05

Muhammad Altabba · Answer 3 · 2019-06-19T23:57:31.243

84

Consider that, when having a large number of files, there is a Limit at INotify Watches on Linux. So increasing the watches limit to 512K, for example, can solve this.

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

Note that the previous causes an in-memory change that you will lose after restart.

However, you can make it persistent, by executing:

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

As a reference, you can check: https://github.com/angular/angular-cli/issues/8313#issuecomment-362728855 and https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

edited Jun 19 '19 at 23:57

answered May 21 '18 at 12:07

Muhammad Altabba

2,583
19
31

5

This worked for me on ubuntu 14 - "echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system" – mahesh kajale Nov 15 '18 at 13:49
1

you can use this commmand to check/test the current watch limit `cat /proc/sys/fs/inotify/max_user_watches` Above answer is a totally complete answer but here is a link with little more description https://confluence.jetbrains.com/display/IDEADEV/Inotify+Watches+Limit – Junaid Oct 09 '19 at 08:10
worked fine. it worth noting that some IDEs (like JetBrains Webstorm) use inotify to track file changes as well. so, keep it in mind if you open 5 projects and than run ng serve. – Multis May 24 '20 at 15:30

score 26 · Answer 4 · answered Mar 01 '18 at 08:29

26

Because of, The system that detects changes can't handle so much watches by default.

And the solution is 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.

answered Mar 01 '18 at 08:29

Chintan Kotadiya

1,335
1
11
19

6

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p – Wagner Danda da Silva Filho Mar 01 '18 at 16:06

score 18 · Answer 5 · edited Feb 26 '19 at 15:36

In your project dist folder is own by root

Try to use sudo ng serve instead of ng serve.

Another solution

When there is having a large number of files watch not work in linux.There is a Limit at INotify Watches on Linux. So increasing the watches limit

//When live server not work in linux

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

ng serve //You can also do sudo **ng serve**

score 8 · Answer 6 · answered Mar 21 '18 at 04:35

8

Only need to run sudo ng serve to resolve the issue.

answered Mar 21 '18 at 04:35

Sandeep Mishra

63
1
2

6

Nice workaround but why having to do so is the real question.... running as root isn't the best practice... – Pipo Aug 17 '18 at 13:30

score 5 · Answer 7 · answered Feb 05 '19 at 13:57

This may help if it is the same problem I had. Trying to use ng serve and ng build --watch sometimes worked but mostly they were not watching for code changes and I thought it was something to do with ng.

Then I remembered a problem I had a while back with inotify watches

I ran this on my Ubuntu machine and it seems to have kicked in and watching code changes:

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

credit goes to Scott Smith

score 3 · Answer 8 · answered Apr 17 '19 at 21:25

3

I don't recommend changing SO parameters. I've experienced some (lag) issues after changing fs.inotify.max_user_watches parameter since you will have other services running...

The "ng serve --poll=2000" is a good solution but you will probably forget this parameter...

Investigating: https://github.com/angular/angular-cli/wiki/angular-cli I'd done the following solution.

Changed de angular.json with poll parameter

"serve": {
   "builder....
   "options": {
        "browserTarget": "xkcd:build",
        "poll": 2000
   }
   ...

Works on My Machine :D

answered Apr 17 '19 at 21:25

wdavilaneto

788
6
7

1

Thank you! This is ad hoc way to run it without modifying config files: `npm run ng serve -- --poll=2000`. This is not as nice as file change detection, but *just works* on my machine (corporate flavor of Ubuntu 18.04). I have max_user_watches set to 524288, but `ng serve` still fails detecting changes after some time. I have better things to do than investigating this, so this solution is just what I need. – Andrei Sinitson May 21 '20 at 11:24
1

Thanks!, just added "poll":2000 in angular.json & working well – Kishan Chauhan Oct 01 '20 at 10:07

score 3 · Answer 9 · answered Nov 15 '19 at 06:06

try this. If you do like this you don't need to fire always any command You need to fire only one time

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

cat /proc/sys/fs/inotify/max_user_watches

fs.inotify.max_user_watches=524288

score 2 · Answer 10 · answered Apr 01 '18 at 23:48

If all else fails, check your code for syntax errors - particularly on index.html, or parts of your code you recently edited just before this auto update broke. Syntax errors will break this auto update functionality in Angular.

In my case, I had multiple projects open in separate VS Code windows. On all my other projects, ng serve worked as expected: it auto updated on save. But on one project it would require a manual refresh to update. It ended up being because I had html comments outside of the defined HTML area of the template (so, the HTML comments came before <!doctype html>. So it was invalid bc it's HTML syntax outside of an HTML area.

I erased the comments and bam, auto update started working again (after one more manual refresh).

So go through index.html or other parts of your code you recently edited before this broke and one by one, cut sketchy parts out, do a refresh in the browser, then come back to VS Code and make a change, save and see if it auto updates.

Other errors with the Template may also prevent it from working correctly. In my case, I had custom component expecting an `@Input()`, but the attribute was blank, like this: `[myInput]=""`. Filling it with a value restored `ng serve`, no manual refresh required. — Zarepheth, Jul 30 '19 at 19:50

score 2 · Answer 11 · answered Oct 04 '18 at 09:23

I discovered that the dist/ folder in the project was owned by root. That is why sudo ng serve does see the changes when ng serve does not.

I removed the dist/ folder sudo rm -R dist/ and rebuild it as current user by starting the dev server ng serve and all worked again.

score 2 · Answer 12 · answered Jan 15 '19 at 22:24

I was having this problem on a new Linux Ubuntu install and noticed I was getting an error about 'too many watchers for limit' in VSCode at the same time. I followed the instructions to fix it in VSCode and it also fixed the issue with ng watch. More info here https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

I noticed people suggesting sudo to run watch. This is a dangerous game, you are giving npm packages root access to your system. If your permissions are correct, my issue could be your fix since the limit is per user, and by running as sudo, you are running as root instead of your current user that is past the limit (running a watch heavy ide like vscode or atom on ). If for some reason you have the wrong permissions, set them properly to your user / group with chown.

+1 for suggesting to use `chown` instead of running `ng serve` with `sudo`, which should be avoided by all means! — Tobi, Feb 11 '19 at 17:46

Sahil Ralkar · Answer 13 · 2019-11-29T10:45:00.147

2

Didn't work for me:

ng serve --watch

Try :

sudo ng serve

this worked for me!

edited Nov 29 '19 at 10:45

answered Nov 28 '19 at 10:38

Sahil Ralkar

2,331
23
25

score 1 · Answer 14 · answered Jan 03 '19 at 21:17

I had the same problem, using sudo ng serve seemed to "solve" the problem unsatisfactorily. Using sudo is not satisfactory IMO.

I checked my INotify count versus my default limit (8192) using: lsof | grep inotify | wc -l The value returned by the above command was way less than the limit. So the INotify solution didn't seem to apply to my problem.

I also checked permissions and ownership, both seemed ok, comparable to another project that worked.

Out of frustration I restarted VS Code. Basically I closed all instances, I had two running and re-opened both following which the problem went away.

I am leaning towards a possible bug somewhere. This is something to consider before turning your system inside out. Fortunately/Unfortunately this problem hasn't occurred again, I'll dig deeper if it does.

score 1 · Answer 15 · answered Jan 24 '19 at 06:17

1

You can try this too.

sudo ng serve

answered Jan 24 '19 at 06:17

Gurpreet Singh

3,061
5
19
36

score 1 · Answer 16 · answered Jun 14 '19 at 05:37

Doing the sudo ng serve command is a bad practice. You have to change the npm permission so that every time if you have to install some npm packages you don't have to use sudo.

This link can solve how to change npm permission to the current user and after following through this steps after you set the npm permission you can remove the node_modules folder from your project directory and use npm install. After completion of packages installation you can run ng serve and you don't have to do sudo ng serve every time you want to run your angular project.

score 1 · Answer 17 · answered Sep 01 '19 at 14:12

1

My answer may not be useful. but I search this question because of this.

After I bought a new computer, I forget to set auto save in the editor. Therefore, the code actually keep unchanged.

answered Sep 01 '19 at 14:12

Kenneth Chan

532
4
20

score 1 · Answer 18 · answered May 23 '20 at 09:57

1

for window -

c:\>ng serve --open

For Linux -

$sudo ng serve --open

answered May 23 '20 at 09:57

Pravind Kumar

809
1
11
10

score 0 · Answer 19 · answered Sep 23 '19 at 21:34

I would like to leave my case here, just for reference. In my case, the problem was on the system permissions. I used a shared folder inside a VM as a repo. I had no other message like permission denied or something. Tried everything and then I just realized that I was using a network drive.

score 0 · Answer 20 · answered Jun 18 '20 at 06:05

0

Giving full permission for the project folder worked for me

answered Jun 18 '20 at 06:05

Mohammed Muzammil

644
9
17

score 0 · Answer 21 · answered Jun 19 '20 at 12:40

0

In my case on Mac it was fixed by granting Read/Write permission to logged on user to /usr/local/lib

answered Jun 19 '20 at 12:40

Pavel Popov

111
1
3

score -1 · Answer 22 · answered Oct 10 '19 at 17:47

-1

Restarting the server worked for me.

answered Oct 10 '19 at 17:47

Beatrice

76
9

score -1 · Answer 23 · answered Aug 28 '20 at 21:27

-1

For me what worked was:

rm -rf node_modules && npm install

And then

ng serve

answered Aug 28 '20 at 21:27

Dalorzo

19,834
7
55
102

score -1 · Answer 24 · answered Jan 12 '21 at 19:21

-1

use sudo before ng serve it will work. In terminal type : 'sudo ng serve'

answered Jan 12 '21 at 19:21

Maddy

503
6
17

score -1 · Answer 25 · answered Sep 16 '21 at 13:09

-1

Restarting the IDE did the job for me. I'm using VS Code

answered Sep 16 '21 at 13:09

Muhammad Ahmar Khan

241
3
7

score -1 · Answer 26 · answered Apr 02 '22 at 20:44

-1

If you are using vsCode, maybe you forgot to enable Auto Save.

Go and select File > Auto Save to enable auto save.

The problem will be solved.

answered Apr 02 '22 at 20:44

Jafar Amini

315
2
8

ng serve not detecting file changes automatically

26 Answers26

Linked