javascript - cache - angularjs internet explorer 11

Evite la llamada GET de almacenamiento en caché de IE11 en Angular 2

Question

Tengo un punto final de descanso que devuelve una lista en una llamada GET. También tengo un punto final POST para agregar nuevos elementos y un DELETE para eliminarlos. Esto funciona en Firefox y Chrome, y POST y DELETE funcionan en IE11. Sin embargo, GET en IE11 solo funciona en la carga inicial de la página. La actualización devuelve datos almacenados en caché. He visto publicaciones sobre este comportamiento en Angular 1 pero nada para Angular 2 (candidato de lanzamiento 1).

Answer 1

Deshabilite el almacenamiento en caché del navegador con metaetiquetas 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 2

Hoy también tuve este problema (maldito IE). En mi proyecto, uso httpclient , que no tiene BaseRequestOptions . ¡Deberíamos usar Http_Interceptor para resolverlo!

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

Módulo de proporcionar

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

Answer 3

Para Angular 2 y posteriores , la forma más fácil de agregar encabezados sin caché anulando RequestOptions :

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

Módulo:

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

Answer 4

Reenvíe el problema de almacenamiento en caché de respuesta angular de por $ http , debe agregar los encabezados ''Pragma'', ''no-cache'', ''If-Modified-Since'' a cada solicitud ''GET''.

El escenario del interceptor ya no es compatible con angular 2. Entonces, debe extender el http como se describe aquí ¿Qué es el httpinterceptor equivalente en angular2? .

Angular 4.3 ahora incluye el servicio HttpClient , que admite interceptores.

Answer 5

Un poco tarde, pero me encontré con el mismo problema. Para Angular 4.X escribí una clase Http personalizada para agregar un número aleatorio al final para evitar el almacenamiento en caché por IE. Se basa en el segundo enlace de dimeros ( ¿Qué es httpinterceptor equivalente en angular2? ). Advertencia: no se garantiza que esté 100% libre de errores.

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 6

Editar : vea el comentario a continuación; esto no es necesario (en la gran mayoría de los casos).

Ampliando la respuesta de Jimmy Ho anterior, solo quiero evitar el almacenamiento en caché de mis llamadas API, y no otro contenido estático que se beneficiará de ser almacenado en caché. Todas mis llamadas API son a URL que contienen "/ api /", por lo que modifiqué el código de Jimmy Ho con una marca de verificación que solo agrega los encabezados de caché si la URL solicitada contiene "/ api /":

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>> {
    // Only turn off caching for API calls to the server.
    if (req.url.indexOf(''/api/'') >= 0) {
        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);
    } else {
        // Pass the request through unchanged.
        return next.handle(req);
    }
}

}