0

I am now managing an AngularJS app that I didn't develop while trying to learn more about AngularJS. However, I am stuck at this particular issue. I am updating some text on the html code. here is an example. I change this

<div fxFlex="50" fxLayoutAlign="center center">
  <h4 class="overview-title">Energy Use</h4>
</div>

with this:

<div fxFlex="50" fxLayoutAlign="center center">
   <h4 class="overview-title">Energy Used</h4>
</div>

and I run "npm run models" and then run the app, but the page still shows "Energy use" instead of "energy used". this makes it difficult for me to test any update. can someone help explain why this happens or point me to a way to force angular JS to use the latest version of a particular HTML page?

Puneet
  • 470
  • 5
  • 17
user2681358
  • 99
  • 1
  • 1
  • 8
  • 1
    angularjs is just a javascript framework, it doesn't have anything to do with npm. – Claies Mar 08 '18 at 07:22
  • 3
    Always clear the browser cache and hit ctlr+F5 to force fetch all cached items from server again. – Thangadurai Mar 08 '18 at 07:23
  • 1
    Check that `npm run models` is updating the app. I assume it bundles, but find out where it bundles from and whether it's including your file. – Shoreline Mar 08 '18 at 12:08
  • Thanks, everyone. ctlr+f5 seems to do the trick. @Thangadurai if you write it as an answer I can accept it. – user2681358 Mar 08 '18 at 16:21

2 Answers2

1

When you request a page from the browser, by default most of the browsers will cache some of the files in order to serve the pages quickly for the future requests. Though it improves the response time, becomes confusing when you are in the development stage.

A quick work around that I follow for these cache issues are, clear the browser cache and hit the CTLR+F5 key to force fetch the cached files from the server again.

If you have a page that should not be cached, you can do it by setting the appropriate HTTP headers in the response stream. Please see this SO post for more information

Thangadurai
  • 2,223
  • 22
  • 28
1

  1. Make Use of Template Caching: $templateCache is angular’s build in key-value store for the template contents. When fetching a template declared by a remote url through ng-include, angular looks for it first in the $templateCache and if the template is found there it doesn’t perform the http request.
    https://docs.angularjs.org/api/ng/service/$templateCache?

  2. Build your latest template cache for AngularJS using command: gulp: build-template-cache

  3. Perform CTRL+F5 to clear browser cache and your latest HTML changes will display immediately.

Léa Gris
  • 10,780
  • 3
  • 21
  • 32
Anurag Chugh
  • 259
  • 2
  • 11