Ionic Serve Live Reload Takes 2 Reloads

Hey guys,

I’ve created some weird behavior with my ionic serve. It started when I was trying to build a PWA by running ionic build --prod which was returning a error message. I then ran
npm install @ionic/app-scripts@latest --save-dev and things have never been the same. First ionic serve wouldn’t work so I uninstalled app scripts then reinstalled. I was still getting build errors so I completed uninstalled Cordova and Ionic and did a fresh install. Finally ionic serve is working and livereload appears to be working too (refreshing the browser when project is saved) except it only updates after I hit refresh in the browser after the application has reloaded. So essentially it takes 2 reloads to populate the changes.

I cloned a project that was created on my primary PC on to my second environment and got the same behavior. Any idea what I’ve done and how I can get things moving smoothly again? Below is my package.json

Many thanks

  "name": "Ionic App",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/admob-free": "^4.11.0",
    "@ionic-native/core": "~4.11.0",
    "@ionic-native/facebook": "^4.12.0",
    "@ionic-native/insomnia": "^4.12.0",
    "@ionic-native/media": "^4.12.0",
    "@ionic-native/splash-screen": "~4.11.0",
    "@ionic-native/status-bar": "~4.11.0",
    "@ionic/storage": "2.1.3",
    "cordova-admob-sdk": "^0.17.0",
    "cordova-android": "7.0.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-admob-free": "^0.17.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-facebook4": "^2.3.0",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.3",
    "cordova-plugin-media": "^5.0.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-promise-polyfill": "0.0.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  "devDependencies": {
    "@ionic/app-scripts": "3.1.11",
    "@ionic/lab": "1.0.8",
    "typescript": "~2.6.2"
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-admob-free": {},
      "cordova-plugin-media": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-insomnia": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "54968468468",
        "APP_NAME": "Ionic App",
        "ANDROID_SDK_VERSION": "4.+"
    "platforms": [

Still haven’t got this fixed. Tried complete fresh install of ionic, cordova and build scripts

npm uninstall -g cordova ionic
npm uninstall @ionic/app-scripts -g --save-dev
npm cache clean -f
npm install npm -g
npm uninstall node
npm install node -g
npm install -g ionic cordova

Here is my env


   ionic (Ionic CLI)  : 4.1.1 (C:\Users\tomoh\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0


   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.2.0
   OS     : Windows 10

Still get the same annoying behavior on a brand new project. 2 refreshes to reload the content.

After quite a bit of digging I found that somewhere along the line Chrome was causing the issue. A fresh install of Chrome fixed the issue.