location.reload(true) est obsolète

Question

Je sais qu'il n'est pas idéal de recharger une application monopage Angular. Cependant, il y a un endroit où j'ai besoin de recharger l'application complète.

TSLint dit que reload est déprécié.

Existe-t-il une alternative à cela ?

Answer 1

Vous pouvez utiliser location.reload() sans le drapeau forceReload. Ceci est simplement déprécié parce que ce n'est pas dans la spécification : https://www.w3.org/TR/html50/browsers.html#dom-location-reload

Answer 2

Si vous regardez la définition de l'interface pour Location, vous verrez ce qui suit :

/**
  * Reloads the current page.
  */
reload(): void;
/** @deprecated */
reload(forcedReload: boolean): void;

Utilisation de location.reload() est la syntaxe valide. C'est seulement le rechargement avec forcedReload qui est déprécié.

Dans votre cas, changer location.reload(true) a location.reload() pour résoudre votre problème.

Answer 3

Depuis le forceReload est déprécié, comme 3 personnes l'ont déjà mentionné, il est aussi déjà ignoré par certains navigateurs.

En utilisant uniquement location.reload(); n'est pas une solution si vous voulez effectuer une force-recharge (comme cela est fait avec par exemple Ctrl + F5 ) afin de recharger toutes les ressources depuis le serveur et non depuis le cache du navigateur.

La solution à ce problème est, d'exécuter un POST à l'emplacement actuel, car cela oblige toujours le navigateur à tout recharger.

location.reload() ne fait qu'exécuter un GET demande.

J'ai donc trouvé une solution pour placer un formulaire vide sur l'application Angular avec method="POST" y action="https://example.org/" et ensuite soumettre ce formulaire à partir du code-behind quand on le souhaite.

Modèle :

<form [action]="myAppURL" method="POST" #refreshForm></form>

Code-behind / composant :

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  // bla bla bla Mr. Freeman
})
export class FooComponent {
  @ViewChild('refreshForm', { static: false }) refreshForm;

  forceReload() {
    this.refreshForm.nativeElement.submit();
  }
}

Je suppose que cela peut également être fait d'une manière plus simple. Je cherche... (HttpClient, peut-être ?)

Answer 4

Depuis window.location.reload(true) a été déprécié. Vous pouvez utiliser :

window.location.href = window.location.href ,

pour forcer le rechargement et vider le cache.

Answer 5

D'après la réponse de Martin Schneider, vous pouvez créer une fonction, et ensuite l'appeler simplement

forceReload() {
    if(environment.production) {
        const form = document.createElement('form');
        form.method = "POST";
        form.action = location.href;
        document.body.appendChild(form);
        form.submit();
    } else {
        window.location.reload();
    }
}

Bonne chance !