Angular/CLI — auto reload doesn't happen

Question

I recently started working with Angular/CLI tool, I\'m facing a problem while executing the file, that is when I run

ng serve 

then this c

Answer 1

I also encountered the same problem a few days back in my linuxOS, and when I read about it, I found that this problem is heavily dependent on the system you use and the way you did your setup for angular-cli, both globally and locally. So, after reading readme.md created by angular-cli for each project, I tried using ng-build --watch but the problem still couldn't be solved because by running this command it should work like ng-serve but it only build the app and doesn't even served it on localhost:4200. then, after digging into the problem more deeper I found the problem, it was with my OS, I am using ubuntu, the inotify/max_user_watches value 8192, which I crossed, due to which it wasn't showing any changes made further. So i used these- echo "fs.inotify.max_user_watches=524288" | sudo tee -a /etc/sysctl.conf sudo sysctl -p and it worked fine.

p.s. in the process i also tumbled upon a solution with these commands - rm -rf nodes_modules/ -> npm update -> npm install. try this before doing above stated canges, if this works for you then you are well and good to go.

Answer 2

Ng serve automatically reload when the files are modified however if the config is messed up then you can try bellow command

ng serve --live-reload

Answer 3

I met the problem when my devDependencies is Angular 7
but install angular/cli of version 8.x.x

"devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^7.3.8",
    "@angular/compiler-cli": "^7.2.12",
}

just remove the cli globally

npm unintsall -g @angular/cli
npm cache clean -f 

check the state

ng version # if remove successfully, the command would no work

then install cli again

sudo npm install @angular/cli@^7.3.8 -g

Answer 4

I have faced the same issue in my ubuntu machine. It was due to the permission settings. I changed the workspace permission settings by following the below mentioned steps.

1. Open a terminal window.
2. Type sudo chmod a+rwx /path/to/file into the terminal, replacing “/path/to/file” with the file you want to give permissions to everyone for, and press “Enter.” You can also use the command sudo chmod -R a+rwx /path/to/folder to give permissions to a folder and every file and folder inside it. Omit the “x” from either command if you don’t want the files to be executable.

I have used sudo chmod -R a+rwx /path/to/folder.

3. Type your password at the password prompt and press “Enter.”

Once it is done, do npm build and start the application by ng serve.

[OR]

Simply you can use "sudo ng serve".

Now do the necessary changes in the workspace files and without restart, auto-reload happens. Hope this would be helpful!

Answer 5

If angular auto-reload is not working on ubuntu 20.04 and you are using nvm try running the following:

1. sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
2. Delete node_modules in your application's folder
3. npm uninstall -g @angular/cli
4. npm cache verify
5. npm install -g @angular/cli
6. In your application's folder run npm i

Hopefully when you run ng serve everything should work as expected now.