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

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 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 work? whenever you make changes to the typescript component/CSS/images in vscode or IDEs, The angular reload server rebuilds and recompiles, 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 the 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 reloading 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 --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=falseoption, 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 an exclude property with a folder path or file 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.