angularjs code changes do not show up after browser refresh

Question

Any time, I make code changes in .hmtl file or the .js file, the browser still renders the old code and my new code changes don't show up in the browser result.

For example, I add the following 2 lines of code in .html file.

    <div class="control-group">
        <label class="control-label">First Name</label>
        <div class="controls readonly">
            {{profile.FirstName}}
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">Last Name</label>
        <div class="controls readonly">
            {{profile.LastName}}
        </div>
    </div>

Then I do the following:

In VS2013, right click on my project and view in browser (IE or Chrome).
Login to my application.
Go the respective page and I see the rendering of the old html file. I do not see the newly added 2 div elements rendered at all.
I even hit f5 to refresh the browser but still no luck.

What am I doing wrong?

score 58 · Accepted Answer · answered Feb 04 '15 at 00:46

58

Hit F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload your page.

answered Feb 04 '15 at 00:46

Phil Degenhardt

7,215
3
35
46

I can not find option in IE in dev tools to disable the cache – dotnet-practitioner Feb 04 '15 at 00:49
3

See here: http://stackoverflow.com/questions/18083239/what-happened-to-always-refresh-from-server-in-ie11-developer-tools – Nate Barbettini Feb 04 '15 at 00:50
2

Where is the option to disable the cache? – Jan 13 '17 at 05:23

Nate Barbettini · Answer 2 · 2016-08-31T22:37:53.350

26

Besides using Dev Tools to make sure the cache is disabled, you can edit your Web.config file and tell IIS to not cache your Angular files:

<configuration>

  <!-- Disable IIS caching for directories containing Angular templates and scripts -->
  <location path="app">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache"/>
      </staticContent>
    </system.webServer>
  </location>

...
</configuration>

My Angular root directory is app/. You may need to modify according to your file structure.

edited Aug 31 '16 at 22:37

answered Feb 04 '15 at 00:53

Nate Barbettini

51,256
26
134
147

2

Wow... this saved me! I can't tell all of my customers to force chrome to refresh, and this fixed it! – Scottie Aug 31 '16 at 22:36

score 10 · Answer 3 · answered Dec 02 '16 at 02:57

10

TypeScript only!

In tsconfig.json add…

"compileOnSave": true,

answered Dec 02 '16 at 02:57

StinkySocks

812
1
13
20

Where in the file? under what label? – mm_ Jun 01 '17 at 20:26

score 5 · Answer 4 · answered Feb 04 '15 at 00:47

5

Try disabling your cache with Dev Tools:

https://developer.chrome.com/devtools/docs/settings#general

answered Feb 04 '15 at 00:47

Oka

23,367
6
42
53

If security issues were blocking access to your network resources, would you suggest disabling the firewall? Is that a "solution"? – Rick O'Shea Mar 20 '17 at 21:46
@RickO'Shea What? These two topics aren't even remotely comparable. This question & answer(s) are discussing disabling browser _caching_ in a sandbox environment, during _development_ - so that the developer can see their changes. This is standard procedure when doing front-end development. It's quite literally equivalent to doing a hard-refresh (`ctrl+shift+R` in Chrome) every time, instead of a normal refresh. Nothing is blocking access to the resources, it's simply that cached versions are being loaded. – Oka Mar 21 '17 at 01:11

score 4 · Answer 5 · answered Jan 29 '17 at 15:50

4

Open devTools in chrome and select Network tab, In Network tab Un-check the Disable cache and reload the page.

answered Jan 29 '17 at 15:50

harry_42

41
1

None of the answers tell exactly how to do it in chrome browser, this answer is perfect for chrome. – The Guest Mar 10 '17 at 15:24
@harry_42 I thought this would work, but for some reason, it isnt. I'm using angularJS on my local and for some reason when I made an edit in the `angular.js` file in `bower_components/angular` folder, the change is not being reflected in the UI – Chris22 Jul 02 '19 at 23:06

score 3 · Answer 6 · answered May 18 '17 at 18:57

For me, none of the previous answers worked. I was using Chrome, and the only way I was able to view the update was by opening an incognito window. My regular browser window, for some reason, just will not get the latest assets.

I have tried clearing my cache, disabling cache on devtools, and hard refresh, to no avail. The only way I was able to fix it was by clearing the DNS cache. Here's a link with more details:

How to Clear the DNS Cache on Computers and Web Browsers

Using command line, here's how you go about doing it:

Windows 7 & Earlier

ipconfig /flushdns

Windows 8

ipconfig /flushdns

OSX (Yosemite, El Capitain, and Sierra)

sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder

mm_ · Answer 7 · 2017-06-03T17:29:15.413

You need to change the aspnetcore enviroment variable from production to development. From the official website:

... set an environment variable to tell ASP.NET to run in development mode:

If you’re using PowerShell in Windows, execute $Env:ASPNETCORE_ENVIRONMENT = "Development"
If you’re using cmd.exe in Windows, execute setx ASPNETCORE_ENVIRONMENT "Development", and then restart your command prompt to make the change take effect
If you’re using Mac/Linux, execute export ASPNETCORE_ENVIRONMENT=Development

If you are in linux, you might have to do it as a superuser. i.e.

sudo export ASPNETCORE_ENVIRONMENT=Development

The value of the variable may revert back to Production after re-booting. If you want to work with several environments, I suggest you define them in the launchSettings.json file:

{
      "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
         "applicationUrl": "http://localhost:40088/",
         "sslPort": 0
      }
   },
     "profiles": {
       "IIS Express": {
          "commandName": "IISExpress",
          "launchBrowser": true,
          "environmentVariables": {
              "ASPNETCORE_ENVIRONMENT": "Development"
          }
       },
       "IIS Express (Staging)": {
          "commandName": "IISExpress",
          "launchBrowser": true,
          "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Staging"
         }
       }
     }  
   }

Read about environments here:

score 2 · Answer 8 · answered Jan 28 '18 at 15:51

2

In chrome press F12>go to network tab> disable cache

answered Jan 28 '18 at 15:51

vinayak hegde

2,117
26
26

score 2 · Answer 9 · answered Jun 04 '20 at 13:43

2

deleting the dist folder from clientApp folder from source resolve my issue and it started auto refresh again

answered Jun 04 '20 at 13:43

Rashmi Bhimani

51
6

score 1 · Answer 10 · answered Feb 04 '15 at 00:51

1

Or you can use Browserlink in Visual Studio 2013 to automatically reload the page

http://www.asp.net/visual-studio/overview/2013/using-browser-link

answered Feb 04 '15 at 00:51

Toan Nguyen

11,263
5
43
59

score 1 · Answer 11 · edited Mar 21 '18 at 13:20

1

You need to run command yarn webpack:build to recompile your client code. Otherwise modifications/updates in .HTML, .json, .ts files will not be reflected.

edited Mar 21 '18 at 13:20

Jules Dupont

7,259
7
39
39

answered Mar 21 '18 at 12:53

Valerie

19
3

score 1 · Answer 12 · answered Jun 03 '20 at 11:38

1

I simply deleted the dist folder in Visual Studio and it auto refreshed again.

**** this was for Angular 7 ***

answered Jun 03 '20 at 11:38

Otto

56
3

score 1 · Answer 13 · answered Oct 18 '20 at 10:33

1

Just right click on the page reload button on the browser and choose "Empty cache and Hard Reload"

answered Oct 18 '20 at 10:33

Jimesh Shah

113
10

This works, if you run app locally like me – Divek John Dec 06 '22 at 14:56

score 1 · Answer 14 · answered Dec 17 '20 at 02:16

1

In my case issue inside Angular.json file "deployUrl": should be relative path Like "/support/yourpagenam/bundle/dist/" Hence any changes made in Angular files are not reflecting to Browser.

answered Dec 17 '20 at 02:16

satya prakash

87
1
5

score 0 · Answer 15 · edited May 23 '17 at 10:31

Problem

Client-side (Browser) caching of static files in dev enviornment
Server-side (IIS Express) caching of static files in dev enviornment

Solutions

For Client-side (Browser) caching of static files in dev enviornment

Web.Config/ApplicationHost.config Approch: Web.config Approach suggested by @NateBarbettini above. Please note that this approach is also can be applied to 'Applicationhost.config' instead of web.config file.
"Always Refresh From Server" in IE as suggested above by @Phil Degenhardt. Please find screenshot below.
Navigate to source file location in browser address bar: Try to navigate to the JavaScript file in question by typing the address. It will show you JavaScript file contents. Once you do this, file gets updated.So you can again go back and try to navigate to proper landing page of your application. This time, you will see you get latest JavaScript code getting executed. e.g. If you have problem with not updating 'app/home/home-account.js'. Then in browser navigate to 'http://[your-host/localhost]:[specified port of your application]/app/home/home-account.js. This will show you the contents. Then again navigate to your application's home page i.e. in this case 'http://[your-host/localhost]:[specified port of your application]/'

For Server-side (IIS-Express) caching of static files in dev enviornment

visit IIS Express appcmd commandline utility. In my case, appcmd is located in "C:\Program Files(x86)\IIS Express\appcmd.exe" this path. Then use SITE list and SITE delete command to remove temporary files cached in iisexpress.
There is also one solution which is specific to IE mentioned here: Visual Studio 2013 caching older version of .js file

score 0 · Answer 16 · answered Nov 10 '16 at 06:31

0

This happens because of cache stored by the browser. Before running your application you can delete cache and cookies stored by your browser.

answered Nov 10 '16 at 06:31

Siddharath Gupta

13
1
6

Prasad De Silva · Answer 17 · 2017-04-18T16:08:47.187

0

Set HTTP Response headers to expire content through IIS manager.

Open HTTP Response Headers module for you web application
Click Set Common headers in the Actions pane

https://www.iis.net/configreference/system.webserver/staticcontent/clientcache

edited Apr 18 '17 at 16:08

answered Apr 18 '17 at 15:37

Prasad De Silva

836
1
12
22

score 0 · Answer 18 · answered Mar 17 '20 at 16:35

0

I opened link in Incognito mode since in that mode cache is disabled and Voila it worked.

answered Mar 17 '20 at 16:35

Alex

15
5

angularjs code changes do not show up after browser refresh

18 Answers18

Problem

Solutions

Linked