Chrome changes to Html - force reload

I am making small changes to the html files but often Chrome does not display the revised page and I am having to close the terminal and call ionic serve again.

Is there a way to get Chrome to update?

It’s probably the built-in Chrome cache. You can open the developer tools panel and go into options and disable the… data cache I believe it’s called.

1 Like

Forcing Chrome to disable cache when dev tools are open doesn’t fix the issue for me. Also reproduced issue in Firefox and Edge.

It isn’t that the HTML is getting updated and the browser isn’t seeing the new version. The webpack update for Ionic isn’t happening on HTML template file updates.

  1. Run ionic serve
  2. Page is displayed in (your default) browser
  3. Edit HTML template file of page and save it
    • build started …
    • template update started …
    • template update finished in xx ms
    • build finished in xx ms
  4. Page doesn’t show change in browser
  5. Open a different totally browser (Chrome/Firefox/IE/Edge/Opera/Vivaldi) that doesn’t have the page cached and go to the page
  6. Second browser will still show the page as if it wasn’t changed.
  7. Edit the Typescript file for the page by just touching it and saving
    • build started …
    • transpile update started …
    • transpile update finished in xxx ms
    • deeplinks update started …
    • deeplinks update finished in xxx ms
    • webpack update started …
    • webpack update finished in x.xx s
    • build finished in x.xx s
  8. Page will now show updated in both browsers.

This is a recent issue. Before upgrading to Ionic 3.6.0, this worked just fine. It may have something to do with the big change to the Ionic CLI. I haven’t been able to rollback the changes to get to a working environment yet, though. :anguished:

1 Like

I created a fresh app and don’t have the same issue there, so trying to figure out what got goofed up during my updates to my main app…

My issue may be with lazy loading? When I make an update to a page’s HTML file and save it, the 0.js file in the www\build folder gets updated, but the other .js files do not.

This shows that after removing the !!! from the About header, the 0.js file was updated, but the 1.js, 2.js, and 64.js files were not.

If I look at the Sources in Chrome dev tools when viewing the About page, it is using the 64.js file, so that’s why the page still shows the !!! in the browser.

Any ideas as to why the other .js files aren’t getting updated? If I restart ionic serve, it gets fixed. If I touch the page’s .ts file, it gets fixed. :man_shrugging:

ionic info

cli packages: (C:\Users\Bryan\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node : v8.2.1
    npm  : 5.3.0
    OS   : Windows 10
1 Like

I found that if the html page is linked to more than one ts file i.e. in the selector - changes to the html only appear in chrome by running a new ionic serve call.

@IonicPage()
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
})

In the end what I did was renamed the common html file to be the same as one of the ts file - that way it got updated in Chrome and when I was happy with the hmtl design revert the name back to the that used before.

I just have one copy of the page, but your solution got me thinking, and I figured out what was happening for me!

To make importing files everywhere easier, I was using an index.ts in every folder that exported everything from that folder and below. It allowed for simple imports of lots of components or pages at once, but that was before the lazy loading stuff.

After I moved to lazy loading, I didn’t realize all those index.ts files where causing the app to see multiple copies of the components and pages. After removing them for my About page, editing the HTML for the page started working again.

So I’m all good now. Just have a little bit of cleanup to do. Thanks, @JAR19, for helping me think through this! :dancing_men: