CODEWITHSUNDEEP
angulargoogle-chromebrowserpage-refresh
Chris Halcrow
Chris Halcrow

Reputation: 32010

Need to refresh Chrome twice after Angular recompile

(I considered putting this on SuperUser but it's really more a programming question)

I'm using a grunt browsersync task in the background that recompiles my angularjs code whenever it detects a change. My angular is written using ES2015, and transpiles through the grunt task using Babel. Every time, after the transpile is complete, I have to do a hard CTRL-F5 in Chrome to see the changes take effect. In my Chrome developer tools I have the 'Network > Disable cache' option checked. Why do I need to refresh twice and is there a way to only have to refresh once without manually clearing the cache first or having to use some kind of hack?

Upvotes: 1

Views: 1070

Answers (2)

Chris Halcrow
Chris Halcrow

Reputation: 32010

I discovered that the issue was that I was loading my page using a direct URL in a separate browser tab, rather than the tab which grunt browsersync is connected to using its designated port number (I need to do this because some of my page components are dependent on the port number, so I need to control this). After the grunt transpile, I need to wait until the browser reload of the connected url is complete before I refresh my page in the other tab, then I see the refreshed code first time.

Upvotes: 1

johnjerrico
johnjerrico

Reputation: 143

I'm not really sure this could help, but I have similar problem which I resolve by adding some random string behind the src of my script 

//to tell the browser it's a different script
<script src="myscript.js?id=123123121"></script>

so that the browser identify it as a different script; I have work with either gulp, jspm, webpack and the way I implemented the above code is by using a plugin which will rewrite the script with Date.now() on each compile

Upvotes: 2

Related Questions