Angular cli - how to disable auto reload when ng serve


angular application is started with ng serve , thus starts the server, ng serve automatically reloads the chanegs if any changes to componenent/css/html in angular application.

The below commands starts the server and reload the changes to code.

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

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

live-reload enables to reload changes in browser live reload

How to prevent auto reload change in Angular application?

There are multiple ways we can configure reload option

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

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

This enables to prevent changes for development server.

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

Other option is disable livereload 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 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"

  },
}

Second option, use --no-live-reload with ng command

ng serve --no-live-reload

if the above options does not work , Thrid option

ng serve --watch=true|false

This disables the rebuild on change option with serve command.

prevent reload changes with ng build

live-reload option do not works 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 assets folder in Angular?

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

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

for example, to prevent auto load for 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 reload is not working in windows
  • ng serve not detecting changes automatically in linux/reload
  • ng serve–live reload not working as expected

For all the abolve solutions, Fix is common,

Here are the step by step 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 OS file system to access the files, Make sure that command have sufficient permissions to read and write the files.
sudo chmod -R a+rwx /angular-application
  • remove node_modules folder from your application using below command
rm -rf nodes_modules/
  • delete package-lock.json file
  • uninstall @angular/cli using below command
npm uninstall -g @angular/cli
  • verify and cache clean using below command
npm cache verify (or)
npm cache clean -f 
  • install @angular/cli
npm install -g @angular/cli
  • install all dependencies using below command
npm install

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Angular Material list | Best mat-list and item examples

Fix for Property has no initializer and is not definitely assigned in the constructor

How to convert json to/from  object in angular|Typescript 

Angular ngFor index - How to get current last even and odd index?

How to convert number to words in Angular|Typescript example

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.