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? — user5051310
– user5051310, Commented Oct 3, 2016 at 23:51
if i already opened the page before, it isn't refreshing, otherwise it is working as expected — Krishna Sarma
– Krishna Sarma, Commented Oct 4, 2016 at 0:15

Ravi Teja · Accepted Answer · 2016-10-04 05:02:27Z

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 4, 2016 at 5:02

answered Oct 4, 2016 at 4:14

Ravi Teja

1,1058 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Krishna Sarma Over a year ago

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.

Ravi Teja Over a year ago

For that you new need to set proper cache headers to let your browser know whether to cache pages or not

Ravi Teja Over a year ago

This will help..stackoverflow.com/questions/49547/… .

Collectives™ on Stack Overflow

HTML updates not reflecting in AngularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related