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

User · Answer

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**

User · Answer

You can try this too   sudo ng serve

User · Answer

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  lt  doctype html gt   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

User · Answer

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  amp  amp  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

User · Answer

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

User · Answer

Giving full permission for the project folder worked for me

User · Answer

Didn t work for me     ng serve --watch   Try    sudo ng serve   this worked for me

User · Answer

For me what worked was  rm -rf node modules  amp  amp  npm install  And then ng serve

User · Answer

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

User · Answer

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

User · Answer

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  amp  amp  sudo sysctl -p  cat  proc sys fs inotify max user watches  fs inotify max user watches 524288

User · Answer

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

User · Answer

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

User · Answer

for window -   c   gt ng serve --open   For Linux -    sudo ng serve --open

User · Answer

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  amp  amp  sudo sysctl --system  credit goes to Scott Smith

User · Answer

Only need to run sudo ng serve to resolve the issue

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Restarting the server worked for me

User · Answer

I had the same issue and figured out  that some files in my Angular Project were only permitted to the user root and to the corresponding group root  You can check that with ls -hal  I fixed it by setting both to the user I used the system with  You can do that with  chown -R username groupname   If you want to know what exactly this command does  checkout  https   superuser com questions 462141 how-to-chown-chmod-all-files-in-current-directory

User · Answer

use sudo before ng serve it will work  In terminal type    sudo ng serve

User · Answer

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

User · Answer

ng serve --poll 2000   Working fine in linux and windows

[angular] ng serve not detecting file changes automatically

Examples related to angular