Angular CLI - how to disable auto-reload when ng serve

angular application is started with ng serve, thus starting the server, ng serve automatically reloads the changes if any changes to component/CSS/HTML in the angular application.

The below commands start the server and reload the code changes.

ng serve (or)
ng serve --live-reload (or)
ng serve --live-reload=true

How live-reload options works? whenever you made changes to the typescript component/CSS/images in vscode or IDEs, The angular reload server rebuild and recompile, and starts the server automatically.

live-reload enables reloading changes in the browser live reload

How to disable or prevent auto-reload change in Angular applications?

There are multiple ways we can configure reload option.

with the command line, you can use --live-reload=false.

ng serve --live-reload=false (or) 
ng serve --live-reload false  

It enables the prevention of changes to the development server.

–live-reload=true/false option enables to reload changes or not

Another option is to disable live reload via scripts package.json

package.json

{
  "name": "angular-disable-chanegs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --live-reload=false",

  },
}

The below command serves to disable the reload changes in production.

ng serve --source-map=false --aot --prod --live-reload=false

The same thing is added via scripts

{
  "name": "angular-disable-chanegs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --source-map=false --aot --prod --live-reload=false"

  },
}

The second option, use --no-live-reload with the ng command

ng serve --no-live-reload

if the above options do not work, the Third option

ng serve --watch=true|false

It disables the rebuild on the change option with the serve command.

prevent reload changes with ng build

the live-reload option does not work with ng build command, and throws `Unknown option:–live-reload'

B:\angular-example>ng build --live-reload=false
Unknown option: '--live-reload'

you can use ng build with –watch true/false option.

ng build --watch=true/false

with scripts in package.json

{
  "name": "angular-disable-chanegs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --live-reload=false",
    "build": "ng build --watch=false"

  },
}

How to disable live reload for the assets folder in Angular?

With the –live-reload=false option, It disables reload changes at the application level.

To exclude the specific directory/folder, You have to add tsconfig.json

for example, to prevent autoload for the assets folder, You can add exclude property with folder path or files path as follows

"exclude": [
        "assets"
]

Issues

When you encountered the following issues

• live to reload is not working in windows
• ng serve not detecting changes automatically in Linux/reload
• ng serve–live to reload not working as expected

For all the above solutions, Fix is common,

Here are the step by steps to solve ng serve

• increase time value on max_user_watches in Linux or Unix-based OS.

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

• ng serve uses an OS file system to access the files, Make sure that the command has sufficient permissions to read and write the files.

Sudo chmod -R a+rwx /angular-application

• remove the node_modules folder from your application using the below command

rm -rf nodes_modules/

• delete the package-lock.json file
• uninstall @angular/cli using the below command

npm uninstall -g @angular/cli

• verify and cache clean using the below command

npm cache verify (or)
npm cache clean -f 

• install @angular/cli

npm install -g @angular/cli

• install all dependencies using the below command

npm install

finally, run the ng serve –live-reload command to make it enable/disable reload changes automatically.