Empêcher l'appel GET en cache IE11 dans Angular 2

Question

J'ai un point final de repos qui renvoie une liste sur un appel GET. J'ai aussi un terminal POST pour ajouter de nouveaux éléments et un SUPPR pour les supprimer. Cela fonctionne dans Firefox et Chrome, et les POST et DELETE fonctionnent dans IE11. Cependant, GET dans IE11 ne fonctionne qu'au chargement initial de la page. L'actualisation renvoie les données mises en cache. J'ai vu poste sur ce comportement dans Angular 1 mais rien pour Angular 2 (release candidate 1).

Answer 1

Comme indiqué ici , vous pouvez simplement remplacer RequestOptions pour ajouter les en-têtes nécessaires:

 import { Injectable } from '@angular/core';
import { BaseRequestOptions, Headers } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    headers = new Headers({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
    });
}
 

Module:

 @NgModule({
    ...
    providers: [
        ...
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ]
})
 

Answer 2

Aujourd'hui, j'ai également eu ce problème, (foutu IE). Dans mon projet, j'utilise httpclient , ce qui n'est pas BaseRequestOptions . Nous devrions utiliser Http_Interceptor pour le résoudre!

 import { HttpHandler,
    HttpProgressEvent,
    HttpInterceptor,
    HttpSentEvent,
    HttpHeaderResponse,
    HttpUserEvent,
    HttpRequest,
    HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

export class CustomHttpInterceptorService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler):
      Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
      const nextReq = req.clone({
        headers: req.headers.set('Cache-Control', 'no-cache')
          .set('Pragma', 'no-cache')
          .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
          .set('If-Modified-Since', '0')
      });

      return next.handle(nextReq);
  }
}
 

Module fournir

 @NgModule({
    ...
    providers: [
        ...
        { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptorService, multi: true }
    ]
})
 

Answer 3

Avant la stackoverflow réponse Angulaire IE problème de mise en Cache pour $http, vous devez ajouter les en-têtes "Pragma", "no-cache', 'if-Modified-since" pour chaque 'GET' demande.

L'intercepteur du scénario n'est pas pris en charge angulaire 2 plus. Si vous devez étendre le http comme il est décrit ici, qu'est-Ce que httpinterceptor équivalent dans angular2?.

Angulaire 4.3 comprend maintenant la HttpClient service, qui prend en charge les intercepteurs.

Answer 4

Désactiver la mise en cache du navigateur avec les balises meta HTML: -

 <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
 

Answer 5

Un peu tard, mais j'ai rencontré le même problème. Pour Angular 4.X, j’ai écrit une classe HTTP personnalisée afin d’ajouter un nombre aléatoire à la fin afin d’empêcher la mise en cache par IE. Il est basé sur le 2e lien de dimères ( Quel est l'équivalent httpinterceptor dans angular2? ). Attention: non garanti à 100% sans bug.

 import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response, XHRBackend, RequestOptions, RequestOptionsArgs, 
URLSearchParams } from '@angular/http';

@Injectable()
export class NoCacheHttp extends Http {
    constructor(backend: XHRBackend, options: RequestOptions) {
        super(backend, options);
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        //make options object if none.
        if (!options) {
            options = { params: new URLSearchParams() };
        }
        //for each possible params type, append a random number to query to force no browser caching.
        //if string
        if (typeof options.params === 'string') {
            let params = new URLSearchParams(options.params);
            params.set("k", new Date().getTime().toString());
            options.params = params;

        //if URLSearchParams
        } else if (options.params instanceof URLSearchParams) {
            let params = <URLSearchParams>options.params;
            params.set("k", new Date().getTime().toString());

        //if plain object.
        } else {
            let params = options.params;
            params["k"] = new Date().getTime().toString();
        }
        return super.get(url, options);
    }
}