Verhindern IE11-Zwischenspeicherung GET-Aufruf in Angular 2

Question

Ich habe einen Rest-Endpunkt, der eine Liste bei einem GET-Aufruf zurückgibt. Ich habe auch einen POST-Endpunkt, um neue Elemente hinzuzufügen und ein DELETE, um sie zu entfernen. Dies funktioniert in Firefox und Chrome, und der POST und DELETE funktionieren in IE11. Das GET in IE11 funktioniert jedoch nur beim ersten Laden der Seite. Das Aktualisieren von Daten zwischengespeicherte Daten. Ich habe Post über dieses Verhalten in Angular 1 gesehen, aber nichts für Angular 2 (Release Candidate 1).

Answer 1

Wie beantwortet here, die Sie gerade RequestOptions außer Kraft setzen können Header benötigt hinzuzufügen:

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' 
    }); 
} 

Modul:

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

Answer 2

Weiterleiten der Stackoverflow-Antwort Angular IE Caching issue for $http, Sie sollten die Header 'Pragma', 'No-Cache', 'If-Modified-Since' zu jeder 'GET' Anfrage hinzufügen.

Das Interzeptor-Szenario wird nicht mehr auf Winkel 2 unterstützt. Also solltest du das http wie hier beschrieben erweitern What is httpinterceptor equivalent in angular2?.

Angular 4.3 enthält jetzt den Dienst HttpClient, der Interzeptoren unterstützt.

Answer 3

Ein bisschen spät, aber ich stieß auf das gleiche Problem. Für Angular 4.X Ich schrieb eine benutzerdefinierte Http-Klasse, um eine zufällige Zahl an das Ende anzuhängen, um Zwischenspeicherung durch IE zu verhindern. Es basiert auf dem 2. Link von Dimeren (What is httpinterceptor equivalent in angular2?). Warnung: nicht garantiert zu 100% fehlerfrei.

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); 
    } 
} 

Answer 4

Heute habe ich dieses Problem auch hatte, (verdammt IE) . In meinem Projekt verwende ich , das hat nicht BaseRequestOptions. Wir sollten Http_Interceptor verwenden, um es zu lösen!

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 bieten

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