Angular doesn't update model from json service

Question

Versions: node : 10.7.0 npm : 6.1.0

The Architecture: My page is a simple concept, it renders new photos that are placed in the assets folder, the information is added to a json file which is placed within the assets folder. I have a service that reads the json file then sends an Observable to the component which has the location of the image and some other fields.

The Problem When I publish the site, all browsers render the contents from last publish and do not display the updated pictures or json file.

When I run local, I have no problem, all photos display.

Can someone please help shed a little light, thanks.

Here is what the code looks like:

JSON

[
  {
    "id": "",
    "name": "pic1",
    "location": "../../assets/photos/pic1.jpg",
    "date": "4/28/2018",
    "comments": "this is pic1"
  },
  {
    "id": "",
    "name": "pic2",
    "location": "../../assets/photos/pic2.jpg",
    "date": "4/28/2018",
    "comments": "this is pic2"
  }
]

The Service

 getAllPhotos(){
   photoPath = '../../assets/photoInfo.json';
   return this.http.get(this.photoPath);
 }

The Component

  data : any;

  constructor(private _data: PhotoAlbumService,private zone : NgZone,  public cd: ChangeDetectorRef) {
    this.data = new Array<IPhoto>();
  }
  getRecentPhotos(): void {
        this._data.getAllPhotos()
            .subscribe(recent => { 
                 this.zone.run(() => { // <== added
                     this.data = recent;
                 });
        });
    }

  ngOnInit() {
    let timer;
    this.getRecentPhotos();
    timer = timer(2000, 5000);
    timer.subscribe(() => this.getRecentPhotos());
  }

Can you clarify the issue a bit please? What do you mean by *"the updated pictures"*? How are you updating them? It sounds like you're probably only updating the copy that's held in memory, so each time the server restarts your application, the changes are lost — user184994, Jul 29 '18 at 16:02
so new pictures that are added to assets and the json file are not displayed on page. — jpavlov, Jul 29 '18 at 16:27
And how are how adding the pictures to the assets directory? I don't believe you'll be able to do that with Angular — user184994, Jul 29 '18 at 16:28
So on local host, new pictures are displayed. In production, it seems that pictures are cached and when new ones are added/removed the changes are not reflected. — jpavlov, Jul 29 '18 at 16:36
I believe Angular needs to recompile each time assets are added — user184994, Jul 29 '18 at 16:37
Have you tried clearing your browser's cache to see if the browser is caching the old JSON file? — user184994, Jul 29 '18 at 16:40
So the concern is for other users, they should not have to clear their cache every time they visit a page. — jpavlov, Jul 29 '18 at 16:41
A (somewhat hacky) way around it is to add a random querystring to end of the url, so it becomes `photoPath = '../../assets/photoInfo.json?now=' + Date.now();`, which should prevent the browser from caching — user184994, Jul 29 '18 at 16:44

score 0 · Answer 1 · answered Jul 29 '18 at 22:22

0

It seems the GET request is cached. You can set Cache-Control option to no-cache in order to stop HTTP request from getting cached.

Check this thread for more details: Prevent IE11 caching GET call in Angular 2

answered Jul 29 '18 at 22:22

byj

264
1
8

So I have this at the top of the page: – jpavlov Jul 29 '18 at 22:34
Have you checked request headers in developer tools? Does it set the cache-control header properly? [This thread](https://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers) suggests to set HTTP headers of the request and not rely on meta tags. – byj Jul 29 '18 at 22:56

Angular doesn't update model from json service

1 Answers1