New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live reload does not working as expected, have to save several times the file to get it work #1132

Open
jgw96 opened this Issue Jul 19, 2017 · 50 comments

Comments

Projects
None yet
@jgw96
Copy link
Contributor

jgw96 commented Jul 19, 2017

From @mburger81 on July 19, 2017 14:59

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

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
The sample app I created for you, is using your sidemenu starter template. I changed the pages to IonicPage's and use them for lazyloading. Also the HomePage has a Button to open a ModalPage which is also lazy loaded.

image

The current behavior is, if we change anyhting in the for example home.html like button color, the framework is reloading the app in the chrome browser, but the changes are not applied. We have to save several times the file to get the livereload work and see the changes in browser.

We are not sure what is the reason for that, but at our normal production app where we had this bug after upgrade ionic-angular, it looked like this problem is only on lazy loaded ModaPages, for that reason this demo app has a ModalPage included. But on this example I'm sharing here we have the problem also on the simple home.html file.

Sometimes we also get a old old page in the browser, for example the file as it was 5 or 6 save events earlier. 🤙

Steps to reproduce:
I created a simple repository to reproduce the error:
https://github.com/mburger81/modal-page-live-reload
(please test it 👍)

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

global packages:
    @ionic/cli-utils : 1.5.0
    Ionic CLI        : 3.5.0

local packages:
    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Ionic Framework                 : ionic-angular 3.5.3

System:
    Node       : v6.11.1
    OS         : Linux 4.10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0 

Edit
I'm using latest chrome:
Version 59.0.3071.115 (Official Build) (64-bit)

Copied from original issue: ionic-team/ionic#12409

@jgw96

This comment has been minimized.

Copy link
Contributor

jgw96 commented Jul 19, 2017

From @mburger81 on July 19, 2017 15:11

OMG: I'm testing now again the demo app I shared here, and at the moment I can't reproduce the issue anymore. 😭

Does anyone have a similar issue, or see this in the last time?

@jgw96

This comment has been minimized.

Copy link
Contributor

jgw96 commented Jul 19, 2017

From @Sampath-Lokuge on July 19, 2017 15:37

Me too have this issue.I'm using latest Ionic 3.5.3.For me, this is mostly for the .ts files.I think this is happening due to reloader doesn't wait till we'll finish our changes.I don't know whether is this normal behavior of the live reloader?

@jgw96

This comment has been minimized.

@AlanAlbuquerque

This comment has been minimized.

Copy link

AlanAlbuquerque commented Jul 19, 2017

Hi, same problem here.

Short description of the problem:

Live reload not update children template (parent templates works fine), this only update if stop the live reload and start again.

What behavior are you expecting?

When save a file, update the template with the changes.

Steps to reproduce:

  1. Create a component called header
<ion-navbar class="m-app-header">
    <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title class="logo">
        {{title}} <br>
        <span class="title-address">{{subTitle}}</span>
    </ion-title>
    <ion-buttons end *ngIf="buttonIcon">
        <button (click)="btnClick()" ion-button icon-only>
            <ion-icon [name]="buttonIcon"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
  1. Add the component on the page.
<ion-header>
    <app-header [title]="store?.name" [subTitle]="store?.address?.address"></app-header>
</ion-header>
  1. run "ionic serve"
  2. remove the line "{{title}} < br >" of header.
  3. live reload will reload the page, but the changes not work.

Which @ionic/app-scripts version are you using?
2.0.2

ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.1
    OS         : Linux 4.8
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10 

package.json

{
  "name": "my-app",
  "author": "Name",
  "homepage": "site.com",
  "private": true,
  "config": {
    "ionic_source_map": "source-map",
    "ionic_source_map_type": "source-map"
  },
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "4.0.1",
    "@ionic-native/date-picker": "4.0.1",
    "@ionic-native/facebook": "4.0.1",
    "@ionic-native/globalization": "4.0.1",
    "@ionic-native/google-plus": "4.0.1",
    "@ionic-native/is-debug": "^4.0.1",
    "@ionic-native/social-sharing": "4.0.1",
    "@ionic-native/splash-screen": "4.0.1",
    "@ionic-native/sqlite": "4.0.1",
    "@ionic-native/status-bar": "4.0.1",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "2.0.1",
    "@ngx-translate/core": "7.1.0",
    "@ngx-translate/http-loader": "0.1.0",
    "angular2-moment": "1.6.0",
    "angular2-text-equality-validator": "^2.0.0",
    "angular2-text-mask": "8.0.2",
    "angularfire2": "4.0.0-rc.1",
    "bunyan": "^1.8.10",
    "cordova-android": "^6.2.3",
    "cordova-plugin-console": "^1.0.7",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-facebook4": "^1.7.4",
    "cordova-plugin-globalization": "^1.0.7",
    "cordova-plugin-googleplus": "^5.1.1",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-is-debug": "^1.0.0",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "cordova-plugin-wkwebview-engine": "1.1.3",
    "cordova-plugin-x-socialsharing": "^5.1.8",
    "cordova-sqlite-storage": "~2.0.3",
    "es6-promise-plugin": "^4.1.0",
    "firebase": "4.1.3",
    "gerador-validador-cpf": "^3.1.1",
    "gl-ionic2-env-configuration": "0.0.18",
    "install": "0.10.1",
    "ionic-angular": "3.5.3",
    "ionic-cache": "2.0.5",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "moment": "^2.18.1",
    "npm": "5.3.0",
    "phonegap-plugin-push": "^1.10.5",
    "promise-polyfill": "6.0.2",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^2.0.2",
    "@ionic/cli-plugin-cordova": "1.4.1",
    "@ionic/cli-plugin-ionic-angular": "1.3.2",
    "@types/bunyan": "1.8.0",
    "typescript": "2.3.0",
    "webpack": "3.2.0"
  },
  "cordovaPlatforms": [],
  "description": "Oh My Bread!",
  "cordova": {
    "plugins": {
      "cordova-plugin-datepicker": {},
      "cordova-plugin-console": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-facebook4": {
      },
      "cordova-plugin-globalization": {},
      "cordova-plugin-googleplus": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-wkwebview-engine": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-is-debug": {},
      "cordova-plugin-x-socialsharing": {}
    },
    "platforms": [
      "android"
    ]
  }
}

@mburger81

This comment has been minimized.

Copy link
Contributor

mburger81 commented Jul 20, 2017

@AlanAlbuquerque yes this is exactly what I'm seeing on my side!

Other information:
If I save the file, in browser the app is reloading, but in the console ionic serve / app-scripts does not rebuild the file.

Edit: Ok something in the console I see rebuilding the app and something I don't see, but also if I see rebuilding it it does not always change! Stop ionic serve and lunch it again works fine.

@virgil-av

This comment has been minimized.

Copy link

virgil-av commented Jul 20, 2017

After the last update for me it does not care it just does not work, I have tried to remove the global ionic and cordova, removed the node_modules, removed the browser platform, and installed everything back, live reload still does not work.

In the console I get the the message that it is rebuilding but it does not update the app in the browser.

Command used ionic cordova run browser -l

@Sampath-Lokuge

This comment has been minimized.

Copy link

Sampath-Lokuge commented Jul 20, 2017

@mburger81 You don't need to stop the ionic serve.Just change the ; on your .ts file and then it'll load again without any issue.This is my experience.Try that too.

@AlanAlbuquerque

This comment has been minimized.

Copy link

AlanAlbuquerque commented Jul 20, 2017

@Sampath-Lokuge yes, if we change any .ts file the html will reload.

@Sampath-Lokuge

This comment has been minimized.

Copy link

Sampath-Lokuge commented Jul 20, 2017

@AlanAlbuquerque Yes, Anyoying.But better than the relaunch the server :D

@mburger81

This comment has been minimized.

Copy link
Contributor

mburger81 commented Jul 20, 2017

Yes I saw it this morning two. First save html file then save ts file is working. :)

@virgil-av

This comment has been minimized.

Copy link

virgil-av commented Jul 20, 2017

Every time I save something it just gets stuck at build finished (printscreen below), the app does not refresh.

The command I am using ionic cordova run browser -l

https://ibb.co/ercGH5

Any suggestions ?

@AlanAlbuquerque

This comment has been minimized.

Copy link

AlanAlbuquerque commented Jul 20, 2017

@virgil-av you already tried to use only the command: ionic serve ?

@Sampath-Lokuge

This comment has been minimized.

Copy link

Sampath-Lokuge commented Jul 21, 2017

@virgil-av Why can't you use Ionic serve?

@virgil-av

This comment has been minimized.

Copy link

virgil-av commented Jul 21, 2017

@AlanAlbuquerque @Sampath-Lokuge I am using cordova plugins that are not available in ionic serve. Also Ionic serve seems to be throwing an error now that cordova is not available go figure

@AlanAlbuquerque

This comment has been minimized.

Copy link

AlanAlbuquerque commented Jul 21, 2017

@virgil-av you must add a conditional statement to check if cordova is available:

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(public plt: Platform) {
    if (this.plt.is('cordova')) {
        // add any code that use cordova, like SQLite native database.
    }else{
        // add fallback to run in browser, like WebSQL database.
    }
  }
}

See more: https://ionicframework.com/docs/api/platform/Platform/

@adilhaddaoui

This comment has been minimized.

Copy link

adilhaddaoui commented Jul 21, 2017

yeah same issue here and I reported it here too : Here

@virgil-av

This comment has been minimized.

Copy link

virgil-av commented Jul 21, 2017

It needs a bit of work to find why is not doing what it should do.

Because testing with a blank app it seems that the ionic cordova browser run -l works on a blank, this command worked before but at some point it stopped doing the job.

In the terminal it says that the build has finished but the problem is that the files are not updated in the platform folder basically it fails to copy and refresh.

@Diefenbaker

This comment has been minimized.

Copy link

Diefenbaker commented Jul 21, 2017

Complete novice here, same thing has literally just started with my setup in the last 30 minutes, ionic serve is recognising the saves and reloading the browser, but none of my changes are being reflected. And I've lost use of the console, my training wheels are gone!

Tried restarting the server multiple times, tried saving in the order suggested by others in this thread, tried restarting both browsers and Visual Studio....only thing that worked for me was restarting my laptop. Changes to the files are being reflected in the CLI though, for example commenting out a log which has the only use of a variable:

    var searchTerm = this.currentDay + hour + minute;
    //console.log("Search term: ", searchTerm)

results in a warning being posted in the server terminal:

Unused variable: 'searchTerm'
L121: var minute = "15";
L122: var searchTerm = this.currentDay + hour + minute;
L123: //console.log("Search term: ", searchTerm);

Watching this thread with interest.....

EDIT: It seems to be working fine again now, for a solid 40 minutes it wouldn't update, now it's acting normally :/ I didn't change anything, and no unusual events have occurred on my system....that I can find anyways....

@Sampath-Lokuge

This comment has been minimized.

Copy link

Sampath-Lokuge commented Jul 21, 2017

@Diefenbaker Always use let instead of var.

@davidarius

This comment has been minimized.

Copy link

davidarius commented Jul 28, 2017

Same issue here.

@lsoaresesilva

This comment has been minimized.

Copy link

lsoaresesilva commented Aug 13, 2017

Same issue, was working and "just" stop working. Maybe after the upload to 3.7, but I have downgraded to 3.6 and problem persist.

@viswanathamsantosh

This comment has been minimized.

Copy link

viswanathamsantosh commented Sep 6, 2017

I have the same issue with ionic 3.9! live reload doesn't work as expected.

@davidpestana

This comment has been minimized.

Copy link

davidpestana commented Sep 30, 2017

i have the same issue...

my partner run the same project in another dev environment and works fine,
'watch ready' success but in my environment ... 'watch ready' never fired..

my partner output

[12:11:59]  ionic-app-scripts 2.1.4 
[12:11:59]  watch started ... 
[12:11:59]  build dev started ... 
[12:11:59]  clean started ... 
[12:11:59]  clean finished in 3 ms 
[12:11:59]  copy started ... 
[12:11:59]  transpile started ... 
[12:12:02]  transpile finished in 2.42 s 
[12:12:02]  preprocess started ... 
[12:12:02]  deeplinks started ... 
[12:12:02]  deeplinks finished in 10 ms 
[12:12:02]  preprocess finished in 11 ms 
[12:12:02]  webpack started ... 
[12:12:02]  copy finished in 2.62 s 
[12:12:10]  webpack finished in 8.09 s 
[12:12:10]  sass started ... 
[12:12:11]  sass finished in 1.31 s 
[12:12:11]  postprocess started ... 
[12:12:11]  postprocess finished in 9 ms 
[12:12:11]  lint started ... 
[12:12:11]  build dev finished in 11.88 s 
[12:12:11]  watch ready in 11.95 s 
[12:12:11]  dev server running: http://localhost:8100/ 

[12:12:15]  lint finished in 3.56 s

my own output

ionic serve
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729
       --dev-logger-port 53703 - Ctrl+C to cancel
[20:44:28]  watch started ...
[20:44:28]  build dev started ...
[20:44:28]  clean started ...
[20:44:28]  clean finished in 2 ms
[20:44:28]  copy started ...
[20:44:28]  deeplinks started ...
[20:44:28]  deeplinks finished in 31 ms
[20:44:28]  transpile started ...
[20:44:30]  transpile finished in 1.80 s
[20:44:30]  preprocess started ...
[20:44:30]  copy finished in 1.94 s
[20:44:30]  preprocess finished in 78 ms
[20:44:30]  webpack started ...
[20:44:35]  webpack finished in 5.25 s
[20:44:35]  sass started ...
[20:44:36]  sass finished in 873 ms
[20:44:36]  postprocess started ...
[20:44:36]  postprocess finished in 6 ms
[20:44:36]  lint started ...
[20:44:36]  build dev finished in 8.13 s
[20:44:36]  dev server running: http://localhost:8100/

[INFO] Development server running!
       Local: http://localhost:8100
       External: http://192.168.43.214:8100

[20:44:38]  lint finished in 1.76 s

@mburger81

This comment has been minimized.

Copy link
Contributor

mburger81 commented Oct 2, 2017

This bug is still alive for me, not very often but sometimes.

@alexchuvand

This comment has been minimized.

Copy link

alexchuvand commented Oct 5, 2017

This issue is still happening in ionic 3.12.0. I created a new app using the command
ionic start app super

Every time I make a change in an html template, I have to save it twice to see the changes. I'm using node 8.6.0 on Mac High Sierra.

I noticed that it only happened on the html template I modified. I changed thelogin.tsand login.html to include a formBuilder. When trying to change the label of the ion-label tag, the reload does not work.

login.html

<ion-header>

  <ion-navbar>
    <ion-title>{{ 'LOGIN_TITLE' | translate }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <form [formGroup]="loginForm" (ngSubmit)="doLogin()">
    <ion-list>
      <ion-item>
        <ion-label color="primary" floating>{{ 'EMAIL' | translate }}</ion-label>
        <ion-input type="email" formControlName="email"></ion-input>
      </ion-item>
      <ion-item class="invalid" *ngIf="loginForm.controls['email'].hasError('required') && (loginForm.controls['email'].touched || submitted)">
        {{ 'REQUIRED' | translate }}
      </ion-item>
      <ion-item class="invalid" *ngIf="loginForm.controls['email'].hasError('email') && (loginForm.controls['email'].touched || submitted)">
        {{ 'INVALID_EMAIL' | translate }}
      </ion-item>

      <ion-item>
        <ion-label color="primary" floating>{{ 'PASSWORD' | translate }}</ion-label>
        <ion-input type="password" formControlName="password"></ion-input>
      </ion-item>
      <ion-item class="invalid" *ngIf="loginForm.controls['password'].hasError('required') && (loginForm.controls['password'].touched || submitted)">
        {{ 'REQUIRED' | translate }}
      </ion-item>

      <div padding>
        <button type="submit" ion-button full color="primary">{{ 'LOGIN' | translate }}</button>
      </div>

    </ion-list>
  </form>
</ion-content>

login.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { IonicPage, NavController, ToastController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

import { User as UserProvider } from '../../providers/providers';
import { MainPage } from '../pages';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  private loginForm: FormGroup;
  private submitted: boolean;

  // Our translated text strings
  private loginErrorString: string;

  constructor(public navCtrl: NavController,
    public userProvider: UserProvider,
    public formBuilder: FormBuilder,
    public toastCtrl: ToastController,
    public translateService: TranslateService) {

    this.translateService.get('LOGIN_ERROR').subscribe((value) => {
      this.loginErrorString = value;
    });

    this.loginForm = this.formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.email])],
      password: ['', Validators.required]
    });
  }

  // Attempt to login in through our User service
  doLogin() {
    this.submitted = true;
    if (!this.loginForm.valid) return;
    this.userProvider.login(this.loginForm.value).subscribe((resp) => {
      this.navCtrl.push(MainPage);
    }, (err) => {
      this.navCtrl.push(MainPage);
      // Unable to log in
      let toast = this.toastCtrl.create({
        message: this.loginErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }
}
@airstep

This comment has been minimized.

Copy link

airstep commented Oct 8, 2017

+1 situation like @davidpestana described

@matteobattista

This comment has been minimized.

Copy link

matteobattista commented Oct 11, 2017

Hi same issue on:

$ ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.1 
    Node       : v8.4.0
    npm        : 5.4.0 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

News???
Thank you

@mburger81

This comment has been minimized.

Copy link
Contributor

mburger81 commented Oct 23, 2017

I noticed the bug is much more complicated if you have a PopOver Page!

Today we are in the situation that sometimes even stopping and starting again the ionic server doesn't resolve the problem so at the moment we have big problems to develop the PopOver.

Old frustrating bug IMO.

thx

@yoffe

This comment has been minimized.

Copy link

yoffe commented Oct 26, 2017

Hi,
I solved this by remove the node_modules folder.
then run npm install

@raykin

This comment has been minimized.

Copy link

raykin commented Nov 2, 2017

is it possible related to Lazy Load pages? Live reload feature was in an unstable way on my local too.

@codzero

This comment has been minimized.

Copy link

codzero commented Nov 21, 2017

+1 situation like @raykin described

@karthikrp

This comment has been minimized.

Copy link

karthikrp commented Dec 20, 2017

Can you people check if its happening when you update scss and HTML files or even for ts files?

My project doesn't get updated when I change something in scss and HTML files, but it does work when I change something in typescript files(even adding an empty line will do).

@larpo1

This comment has been minimized.

Copy link

larpo1 commented Dec 20, 2017

In my case what happens is quite specific: I do not have to save "multiple times". I have to save precisely twice. The first time webpack does not run according to the terminal output. The second time it does.

@SamirHodzic

This comment has been minimized.

Copy link

SamirHodzic commented Jan 4, 2018

I had the same issue last few days, needed to save twice every file if I want changes to reflect in a browser.
Clearing local storage and cache storage solved the issue, now it reflects changes on first save always.

@mburger81

This comment has been minimized.

Copy link
Contributor

mburger81 commented Jan 4, 2018

We have the problem only on html files, saving multiple times does not help, saving ts works always.
So what are we doing, we save firstly html file and then save ts file, now we have loaded also the new changed html file.

@kensodemann Hi Ken, can you perhaps jump into this issue, this is a very very old and annoying issue still present for many of us. Thx a lot

@FanFanFantastic

This comment has been minimized.

Copy link

FanFanFantastic commented Jan 10, 2018

I have the same issue , I have to save 2x for html to reflect changes something it tells me my function is not there while clearly it's been defined in ts file. Super Annoying, I temporarily solved the issue by clearing cache and storage and everything in chrome for this page... hopefully it stays clean

@davec21

This comment has been minimized.

Copy link

davec21 commented Jan 19, 2018

I experience this once a day. I will ionic serve, make some changes and live reload will pick them up, make more changes and live reload doesn't grab them. I have to save multiple times for it to work.

I also have an issue where I will ionic serve, make changes and it applies, make more changes and it will revert to an earlier build. Only way to fix is to stop and re serve.

@seiyria

This comment has been minimized.

Copy link

seiyria commented Jan 19, 2018

I've been noticing this frequently, lately. For me, it seems to be if I have any linter errors (unused imports, etc) that the rebuild will choke, and I'll have to fix and re-serve.

@msevestre

This comment has been minimized.

Copy link

msevestre commented Jan 19, 2018

I also have an issue where I will ionic serve, make changes and it applies, make more changes and it will revert to an earlier build. Only way to fix is to stop and re serve.

I had the same issue too were old code was suddenly being served again.

@realappie

This comment has been minimized.

Copy link
Contributor

realappie commented Mar 5, 2018

Possibly related #1322

@stephanebouget

This comment has been minimized.

Copy link

stephanebouget commented Apr 4, 2018

I got the same behavior with html templates and lazyloading.

A workaround is to add those 2 lines :

	    context.transpileState = interfaces_1.BuildState.RequiresUpdate;
            context.deepLinkState = interfaces_1.BuildState.RequiresUpdate;

into this file :
\node_modules@ionic\app-scripts\dist\watch.js
(l 294)

        if (context.bundleState === interfaces_1.BuildState.SuccessfulBuild && htmlFiles.every(function (f) { return f.event === 'change'; })) {
            // .html file was changed
            // just doing a template update is fine
            context.templateState = interfaces_1.BuildState.RequiresUpdate;
          // **********HERE******
	    context.transpileState = interfaces_1.BuildState.RequiresUpdate;
            context.deepLinkState = interfaces_1.BuildState.RequiresUpdate;
        }
@davec21

This comment has been minimized.

Copy link

davec21 commented Apr 4, 2018

So with the change above, can the whole if block not be removed and just always do the full compile?

@larpo1

This comment has been minimized.

Copy link

larpo1 commented Apr 10, 2018

@stephanebouget - thanks worked for me. @jgw96 - please note ^^. Agree could probably refactor the whole condition, but this was an effective workaround for me. You have saved several minutes an hour of pointless resaves!

@askilondz

This comment has been minimized.

Copy link

askilondz commented Apr 12, 2018

For me the issue was because I un-commented the service worker script in index.html to test the output as a PWA. Changes weren't reflecting because of the service worker caching. I had to unregister the service worker from Chrome dev tools -> Application

@mukesh14149

This comment has been minimized.

Copy link

mukesh14149 commented Jul 3, 2018

@virgil-av Did you get any solution?
I too have the same problem while running "ionic cordova run browser -l" and it doesn't reflect any changes in the browser after saving.

@Petah

This comment has been minimized.

Copy link

Petah commented Jul 7, 2018

@mukesh14149 me too

@alherrera42

This comment has been minimized.

Copy link

alherrera42 commented Jul 15, 2018

I´m having the same problems as everyone here. But also I mantain an Ionicv1/AngularJS app, and I have to save several times as well in order to reflect my changes.
I acquired a new SSD for this computer last week so I most likely have the latest updates on everything.

ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : not installed
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

    Cordova Platforms : none
    Ionic Framework   : unknown

System:

    Node : v10.6.0
    npm  : 6.2.0 
    OS   : macOS High Sierra

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

@mburger81

This comment has been minimized.

Copy link
Contributor

mburger81 commented Jul 16, 2018

Hi hot everyone, we think this bug would be never resolved, because the team is working all on the new ionic4 which use ng cli out of the box. So ionic-app-script becomes obsolete and probably they wouldn't spend a lot of time to resolve bugs on it. I'm pretty sure the team would suggest to upgrade on ionic4 if it is ready to use 😄

IMO, you have to wait for new release and then make the upgrade process to v4 as a requirement for all your projects. This is the only solution to finally get out of this hell of ionic-app-scripts 😆

@sudiptosen

This comment has been minimized.

Copy link

sudiptosen commented Aug 18, 2018

Please delete browsing data for Chrome as follows:

chrome://settings/clearBrowserData?search=cach

I noticed that it failed in Chrome (V.68) but worked in Safari and even Chrome Canary (V.70)

After deleting cache, everything appears to be working.

@8tomo8

This comment has been minimized.

Copy link

8tomo8 commented Aug 29, 2018

I was having the same issue, then opened ionic serve in another browser (M Edge) and the issue didn't persist. After uninstalling and reinstalling Chrome the issue is now resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment