HTML updates not reflecting in AngularJS

Question

I am developing an AngularJS project. Each time I change the code, (html/css) and refresh the page, the changes are not reflecting. I already have cache: false in routes. By the way I am using dynamic routes using ui-router and oclazyload. To get the changes, I had to invoke developer tools in chrome (F12), with disable cache option and then do a refresh. Is there anything I am missing like versioning of HTMLs?

Edit

Here is my routes:

$stateProvider
    .state('layout', {
        url: '/:area',
        cache: false,
        templateUrl: function ($stateParams) {
            return 'app/areas/' + $stateParams.area + '/_layout/index.html'
        },
        resolve: {
            load: function ($ocLazyLoad, $stateParams) {
                return $ocLazyLoad.load({
                    name: 'layout',
                    files: ['app/areas/' + $stateParams.area + '/_layout/controller.js']
                });
            }
        }
    })
    .state('layout.inner', {
        url: '/:action',
        cache: false,
        templateUrl: function ($stateParams) {
            return 'app/areas/' + $stateParams.area + '/' + $stateParams.action + '/index.html'
        },
        parent: 'layout',
        resolve: {
            load: function ($ocLazyLoad, $stateParams) {
                return $ocLazyLoad.load({
                    name: 'layout.inner',
                    files: ['app/areas/' + $stateParams.area + '/' + $stateParams.action + '/controller.js',
                    ]
                });
            }
        }
    });

What happens if you open the pages in a different browser? Do you see the changes? — , Oct 03 '16 at 23:51
if i already opened the page before, it isn't refreshing, otherwise it is working as expected — Krishna Sarma, Oct 04 '16 at 00:15

Ravi Teja · Answer 1 · 2016-10-04T05:02:27.367

0

You are not able to get latest changes because your browser is caching old changes.

You said

To get the changes, I had to invoke developer tools in chrome (F12), with disable cache option and then do a refresh

Disable cache option will only be active when dev tools is open. As soon you close dev tools browser will start caching them again.

So, you either have to manually delete the cache Ctrl+Shift+R or right click on refresh button and select Empty Cache and Hard Reload (Dev tools should be open).

For a simpler solution on chrome, you can use Cache Killer extension. When it is enabled, each time page is refreshed it deletes all the cache.

edited Oct 04 '16 at 05:02

answered Oct 04 '16 at 04:14

Ravi Teja

1,087
8
13

What about the users? The applications gets some sort of enhancement now and then, which user may not aware or we cannot expect all users clear every time they visit the site. – Krishna Sarma Oct 04 '16 at 09:54
For that you new need to set proper `cache` headers to let your `browser` know whether to `cache` pages or not – Ravi Teja Oct 04 '16 at 09:57
This will help..http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers . – Ravi Teja Oct 04 '16 at 09:59

HTML updates not reflecting in AngularJS

1 Answers1