ionic serve reload without making changes

[kensodemann]

From @agarciaiglesias on October 26, 2017 8:44

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When I use ionic serve it is reloading all the time without making changes in code. After it launch browser automatically starts to build again. I have tried "ionic serve --nolivereload" and I have tried to change ionic.project to select files to watch but nothing works.

Expected behavior:

"ionic serve" should stop building the project after it launch browser. And when I change the code and save it it build again and reload the browser.

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

This is the console after doing ionic serve:

[10:41:24] watch started ...
[10:41:24] build dev started ...
[10:41:24] clean started ...
[10:41:24] clean finished in 13 ms
[10:41:24] copy started ...
[10:41:24] transpile started ...
[10:41:29] transpile finished in 5.20 s
[10:41:29] preprocess started ...
[10:41:29] deeplinks started ...
[10:41:29] deeplinks finished in 44 ms
[10:41:29] preprocess finished in 46 ms
[10:41:29] webpack started ...
[10:41:30] copy finished in 5.51 s
[10:41:42] webpack finished in 12.38 s
[10:41:42] sass started ...
[10:41:46] sass finished in 3.76 s
[10:41:46] postprocess started ...
[10:41:46] postprocess finished in 32 ms
[10:41:46] lint started ...
[10:41:46] build dev finished in 22.21 s
[10:41:47] watch ready in 22.72 s
[10:41:47] dev server running: http://localhost:8100/

Development server running!
Local: http://localhost:8100
External: http://10.74.60.59:8100

[10:41:53] build started ...
[10:41:54] copy update started ...
[10:41:54] transpile started ...
[10:42:00] transpile finished in 6.30 s
[10:42:00] deeplinks update started ...
[10:42:00] deeplinks update finished in 47 ms
[10:42:00] webpack update started ...
[10:42:01] copy update started ...
[10:42:01] copy update started ...
[10:42:02] copy update started ...
[10:42:02] webpack update finished in 1.33 s
[10:42:02] sass update started ...
[10:42:02] copy update finished in 8.27 s

[10:42:02] copy update finished in 1.70 s

[10:42:03] copy update finished in 1.24 s

[10:42:03] copy update finished in 1.92 s

[10:42:07] sass update finished in 5.32 s
[10:42:08] build finished in 14.90 s

[10:42:08] build started ...
[10:42:08] transpile started ...
[10:42:13] transpile finished in 5.22 s
[10:42:13] deeplinks update started ...
[10:42:13] deeplinks update finished in 33 ms
[10:42:13] webpack update started ...
[10:42:16] webpack update finished in 2.53 s
[10:42:16] build finished in 8.46 s

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\agarciaiglesias\AppData\Roaming\npm\node_modules) 
                                                                          
    @ionic/cli-utils  : 1.15.0                                            
    ionic (Ionic CLI) : 3.15.0                                            
                                                                          
local packages:                                                           
                                                                          
    @ionic/app-scripts : 1.3.12                                           
    Ionic Framework    : ionic-angular 3.5.0                              
                                                                          
System:                                                                   
                                                                          
    Node : v8.5.0                                                         
    npm  : 5.4.2                                                          
    OS   : Windows 10                                                     ```




_Copied from original issue: ionic-team/ionic#13247_

[kensodemann]

Hello! Thank you for opening an issue with us!

This does not appear to be an Ionic Framework issue. I will move this to the Ionic CLI repo for you. Please follow the newly created issue in that repo.

Thank you for using Ionic

[agarciaiglesias]

Some one can help me with this??
It is frustrating.

Thanks

[imhoffd]

@agarciaiglesias It looks like it's running an app-scripts "build" after a "watch". I've never seen this before... can I see your package.json?

[agarciaiglesias]

Yes, this is my package.json:

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "test": "ng test",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/cli": "^1.4.3",
    "@angular/common": "^4.4.4",
    "@angular/compiler": "^4.4.4",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/core": "^4.4.4",
    "@angular/forms": "^4.4.4",
    "@angular/http": "^4.4.4",
    "@angular/platform-browser": "^4.4.4",
    "@angular/platform-browser-dynamic": "^4.4.4",
    "@ionic-native/core": "^4.3.1",
    "@ionic-native/network": "^4.3.1",
    "@ionic-native/splash-screen": "^4.3.1",
    "@ionic-native/status-bar": "^4.3.1",
    "@ionic/storage": "2.0.1",
    "@types/node": "^8.0.34",
    "body-parser": "1.18.1",
    "cordova-android": "~6.3.0",
    "cordova-browser": "^5.0.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "^3.5.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "text-encoding": "^0.6.4",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.1",
    "@ionic/app-scripts": "1.3.12",
    "@types/jasmine": "^2.6.0",
    "@types/node": "^8.0.28",
    "codecov": "^2.3.0",
    "jasmine-core": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.4",
    "karma-remap-istanbul": "^0.6.0",
    "karma-typescript": "^3.0.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.7.0",
    "typescript": "2.3.4",
    "webpack": "^2.1.0-beta.22"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-statusbar",
    "cordova-plugin-splashscreen",
    "cordova-plugin-network-information",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "frameworkMovilidad: An Ionic project",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-console": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-network-information": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

[agarciaiglesias]

Sorry, dependencies with @ arent copied. I put my package again:
{ "name": "ionic-hello-world", "version": "0.0.0", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "test": "ng test", "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/cli": "^1.4.3", "@angular/common": "^4.4.4", "@angular/compiler": "^4.4.4", "@angular/compiler-cli": "^4.4.4", "@angular/core": "^4.4.4", "@angular/forms": "^4.4.4", "@angular/http": "^4.4.4", "@angular/platform-browser": "^4.4.4", "@angular/platform-browser-dynamic": "^4.4.4", "@ionic-native/core": "^4.3.1", "@ionic-native/network": "^4.3.1", "@ionic-native/splash-screen": "^4.3.1", "@ionic-native/status-bar": "^4.3.1", "@ionic/storage": "2.0.1", "@types/node": "^8.0.34", "body-parser": "1.18.1", "cordova-android": "~6.3.0", "cordova-browser": "^5.0.0", "cordova-plugin-console": "^1.0.5", "cordova-plugin-device": "^1.1.4", "cordova-plugin-network-information": "^1.3.3", "cordova-plugin-splashscreen": "^4.0.3", "cordova-plugin-statusbar": "^2.2.2", "cordova-plugin-whitelist": "^1.3.1", "ionic-angular": "^3.5.0", "ionic-plugin-keyboard": "^2.2.1", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "text-encoding": "^0.6.4", "zone.js": "^0.8.12" }, "devDependencies": { "@angular/cli": "^1.4.1", "@ionic/app-scripts": "1.3.12", "@types/jasmine": "^2.6.0", "@types/node": "^8.0.28", "codecov": "^2.3.0", "jasmine-core": "^2.8.0", "jasmine-spec-reporter": "^4.2.1", "karma": "^1.7.1", "karma-chrome-launcher": "^2.2.0", "karma-jasmine": "^1.1.0", "karma-mocha-reporter": "^2.2.4", "karma-remap-istanbul": "^0.6.0", "karma-typescript": "^3.0.5", "ts-node": "^3.3.0", "tslint": "^5.7.0", "typescript": "2.3.4", "webpack": "^2.1.0-beta.22" }, "cordovaPlugins": [ "cordova-plugin-whitelist", "cordova-plugin-console", "cordova-plugin-device", "cordova-plugin-statusbar", "cordova-plugin-splashscreen", "cordova-plugin-network-information", "ionic-plugin-keyboard" ], "cordovaPlatforms": [], "description": "frameworkMovilidad: An Ionic project", "cordova": { "plugins": { "ionic-plugin-keyboard": {}, "cordova-plugin-whitelist": {}, "cordova-plugin-console": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-network-information": {} }, "platforms": [ "browser", "android" ] } }

[imhoffd]

You can use the triple backticks to format it correctly:

```
< code here >
```

Please try updating your @ionic/app-scripts to the latest version. You have a very old version.

You can also run ionic doctor check to detect common issues.

[agarciaiglesias]

Hi,

I have the same problem after installing @ionic/app-scripts: 3.0.1.

ionic doctor check says this:

 ionic doctor check
[WARN] For best results, please make sure you're logged in to Ionic.

       Some issues can't be detected without authentication. Run:

            ionic login

√ Detecting issues: 16 / 16 complete - done!
Detected 3 issues.
[WARN] Git doesn't appear to be in use.

       We highly recommend using source control software such as git (https://git-scm.com) to track
       changes in your code throughout time. To fix, take the following step(s):

            1) Download git if you don't have it installed: https://git-scm.com/downloads
            2) Learn the basics if you're unfamiliar with git: https://try.github.io
            3) Make your first commit and start tracking code changes! 😍

       Ignore this issue with: ionic doctor ignore git-not-used

[WARN] Update available for Ionic Framework.

       An update is available for ionic-angular (3.5.0 => 3.8.0). To fix, take the following step(s):

            1) Visit https://github.com/ionic-team/ionic/releases for each upgrade's instructions
            2) If no instructions, run: npm i --save -E ionic-angular@3.8.0
            3) Watch for npm warnings about peer dependencies--they may need manual updating

       Ignore this issue with: ionic doctor ignore ionic-angular-update-available

[WARN] viewport-fit=cover not set in index.html

       iOS 11 introduces new "safe regions" for webviews, which can throw off component sizing, squish
       the header into the status bar, letterbox the app on iPhone X, etc. Fixing this issue will
       ensure the webview takes up the full size of the screen. See
       https://blog.ionic.io/ios-11-checklist for more information. To fix, take the following step(s):

            1) Add viewport-fit=cover to the <meta name="viewport"> tag in your index.html file

       Ignore this issue with: ionic doctor ignore viewport-fit-not-set

3 issues need to be fixed manually.

[imhoffd]

@agarciaiglesias Can you try npm run ionic:serve ?

[agarciaiglesias]

I have tried npm run ionic:serveand it looks like is working better than ionic serve. It is not reloading all the time.
This is the output:

> npm run ionic:serve

> ionic-hello-world@0.0.0 ionic:serve C:\Users\agarciaiglesias\Documents\proyect
> ionic-app-scripts serve

[09:11:25]  ionic-app-scripts 3.0.1
[09:11:25]  watch started ...
[09:11:25]  build dev started ...
[09:11:26]  clean started ...
[09:11:26]  clean finished in 16 ms
[09:11:26]  copy started ...
[09:11:29]  copy finished in 3.11 s
[09:11:30]  deeplinks started ...
[09:11:34]  deeplinks finished in 4.58 s
[09:11:34]  transpile started ...
[09:11:45]  transpile finished in 11.07 s
[09:11:45]  preprocess started ...
[09:11:45]  preprocess finished in less than 1 ms
[09:11:45]  webpack started ...
[09:11:52]  webpack finished in 6.23 s
[09:11:52]  sass started ...
[09:11:55]  sass finished in 3.34 s
[09:11:55]  postprocess started ...
[09:11:55]  postprocess finished in less than 1 ms
[09:11:55]  lint started ...
[09:11:56]  build dev finished in 30.17 s
[09:11:59]  dev server running: http://localhost:8100/
[09:12:09]  lint finished in 14.19 s
[09:12:10]  build started ...
[09:12:11]  deeplinks update started ...
[09:12:14]  deeplinks update finished in 3.73 s
[09:12:14]  transpile update started ...
[09:12:14]  transpile update finished in 155 ms
[09:12:14]  webpack update started ...
[09:12:15]  webpack update finished in 326 ms
[09:12:15]  build finished in 5.59 s

Do I have to use this command instead of ionic serve or is there some way to fix it?

[agarciaiglesias]

I was wrong. The problem is not the command ionic serve.
npm run ionic:serve has been working fine until I opened Visual Studio Code. At that moment the command started to reload all the time again.
I know that maybe is not a bug with Ionic but ¿Do you know how can I fix it?
I have tried to upgrade VS Code to latest version (1.17.2) but still not working.
Thanks.

[agarciaiglesias]

@dwieeb , Have you seen something about this?

[imhoffd]

I don't know, I don't use VS Code. At this point you're probably better off asking on the forum to get more people to see it. They'll likely be able to help more than I can.

[WhatsThatItsPat]

@agarciaiglesias Do you have VS Code set to auto save files?

https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save

[agarciaiglesias]

Hi @PatrickMcD, I have the files.autoSave: off in usser settings of VS Code