CODEWITHSUNDEEP
angular-cli
Durga Abhist
Durga Abhist

Reputation: 593

Angular/CLI -- auto reload doesn't happen

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 command helps us in auto reloading the site when any changes are made in the source file but in my system it is not happening (i.e. site is not auto reloading and when I forcely reload the site then also it is not getting updated as per changes made in the source file).

The site is getting updated only when I terminate the "ng serve" command and again run the same command("ng serve") then only my site is getting updated.

So it becomes hard for me to terminate the server and connect the server, when ever the changes are made, so I request you people if any one know solution of this problem please help me out.

Upvotes: 49

Views: 89975

Answers (14)

mQuiroz
mQuiroz

Reputation: 1378

If your OS is MacOS 10.14 or higher, it will show this error when you type "sudo sysctl -p"

sysctl: illegal option -- p

We are going to solve this by changing that instruction to the following

sudo sysctl net.inet.tcp.always_keepalive=1

It worked for me, I hope it works for you too

Upvotes: 0

Ramón Espinosa
Ramón Espinosa

Reputation: 339

What worked for me was to simple turn the "compileOnSave" option to "true" inside the tsconfig.js

enter image description here

Upvotes: 17

jlawcordova
jlawcordova

Reputation: 157

I encountered this issue because I used WSL to run commands for a project that was under a Windows directory (/mnt/...).

To resolve it, I transferred the project directory on the WSL directory (~/).

Upvotes: 6

Hamfri
Hamfri

Reputation: 2219

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.

Upvotes: 2

Umang Soni
Umang Soni

Reputation: 551

If you are using Linux system then the below command may be helpful for you

Run below command in terminal

sudo ng serve

It works for me !!

Upvotes: -7

Ranjithkumar PC
Ranjithkumar PC

Reputation: 21

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.

  1. 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!

Upvotes: 2

Thomas John
Thomas John

Reputation: 2188

run ng serve with sudo, it worked for me

sudo ng serve

This is only for Linux!

Upvotes: 9

Hector Arroyo
Hector Arroyo

Reputation: 29

it works for me: ng serve --poll=1000

Upvotes: 1

anysunflower
anysunflower

Reputation: 140

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

Upvotes: 0

Inamur Rahman
Inamur Rahman

Reputation: 3291

Just run all the following command and I hope it will work.

rm -rf nodes_modules/
npm update
npm install

and start the server again

ng serve -o

Upvotes: 5

Fahim
Fahim

Reputation: 427

I am using angular 6 and increasing time on max_user_watches worked for me

sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf

sudo sysctl -p /etc/sysctl.conf

Upvotes: 3

BALA
BALA

Reputation: 1200

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

Upvotes: 34

Overflowrun
Overflowrun

Reputation: 547

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

Upvotes: 23

samar taj Shaikh
samar taj Shaikh

Reputation: 1185

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.

Upvotes: 68

Related Questions