Angular-cli ng serve livereload not working

Question

I have created a sample project wiht Ng-cli, then i run ng serve in the source folder, the project loads correctly in the browser but livereload not working.

npm -v : 3.10.9

ng -v: angular-cli: 1.0.0-beta.19-3 node: 4.4.3 os: win32 x64

Already searched a lot information on internet, and nothing solved the issue.

Solution 1

I faced with the same problem on Ubuntu 16.04 and angular CLI 1.0.0.

The problem was related with Inotify Watches Limit on Linux. To solve the issue, I increased the watches limit to 512K. Run these commands.

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

After that, I restarted my IDE, and after that, the change detection started to work.

Solution 2

Increasing the amount of inotify watchers

The technical details

Listen uses inotify by default on Linux to monitor directories for changes. It's not uncommon to encounter a system limit on the number of files you can monitor. For example, Ubuntu Lucid's (64bit) inotify limit is set to 8192.

You can get your current inotify file watch limit by executing:

$ cat /proc/sys/fs/inotify/max_user_watches

When this limit is not enough to monitor all files inside a directory, the limit must be increased for Listen to work properly.

You can set a new limit temporary with:

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

If you like to make your limit permanent, use:

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

You may also need to pay attention to the values of max_queued_events and max_user_instances if Listen keeps on complaining.

Source

Solution 3

Try ng serve -lr flag. This flag works with me. Probably the issue occurs becuase --live-reload flag is deprecated

Solution 4

It due to the webpack.

If we running two angular application at a time. Sometimes, it may not reload application every time we need to stop and start application. For that case run one application at a time.

Solution 5

Is your project on a mapped network drive? I found that this caused LiveReload to fail.

Running on VS Code on Windows 7. Angular CLI: 1.7.4 Node: 8.11.1 NPM: 5.6.0 OS: win32 x64

I created a barebones Angular app with Angular CLI on my 'E:' drive, which is mapped to a folder on my network. 'ng serve' does NOT detect code changes. I copied the project to my 'C:' drive and Live Reload works as expected. So see if moving your project to a local drive solves your problem.

View more solutions

Comments

[sr9yar]

Although, the OP asked about win :P, the answered help me as I use Ubuntu 18 and Angular CLI 6.0.3. Thanks a lot!

[Mr. Brickowski]

This is exactly the issue im facing. Thank you.

[Vlad]

ng serve --live-reload -o angular cli 8.x.x

[Sai Nikhil]

Works like a charm :)

[Omar Hasan]

a nice solution thnx

[Purna]

for me restarting my terminal helped after these changes