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.

Fo

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

TypeScript only!

In tsconfig.json add…

"compileOnSave": true,