location.reload(true) is deprecated

Question

I know that it is not ideal to reload an Angular Single Page Application. However there is a place that I need to reload the full application.

TSLint says that reload is deprecated.

Is there any alternative for this?

Preston

it's only the forceReload flag that's deprecated. – Aubry

Does this answer your question? How to reload a page using JavaScript – Dania

It's pretty useful in some browsers like Firefox, but if you remove that, you will have to come up with a way to force reload it. – Septal

Answer 1

You can use location.reload() without the forceReload flag. This is just deprecated because it is not in the spec: https://www.w3.org/TR/html50/browsers.html#dom-location-reload

Stlaurent

So, in my case, why does TSLint warn me ? : window.location.reload.bind(window.location) – Menado

What can I do if I want to do a forced reload? – Cedilla

And now how to force the full reload? – Grievous

location.reload() doesn't work for Edge in production – Saiz

Doesn't work in Chrome also – Cloris

Answer 2

If you look at interface definition for Location you will see the following:

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

Using location.reload() is the valid syntax. It is only the reload with forcedReload which is deprecated.

In your case changing location.reload(true) to location.reload() to resolve your issue.

Crone

Answer 3

Since the forceReload parameter is deprecated, as 3 people already mentioned, it is also ignored by some browsers already.

Using only location.reload(); is not a solution if you want to perform a force-reload (as done with e.g. Ctrl + F5) in order to reload all resources from the server and not from the browser cache.

The solution to this issue is, to execute a POST request to the current location as this always makes the browser to reload everything.

location.reload() is only executing a GET request.

So I came to the workaround to place an empty form on the Angular app with method="POST" and action="https://example.org/" and then submitting that form from code-behind when wanted.

Template:

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

Code-behind / component:

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

I guess this can be also done in a more non-hacky way. I am investigating... (HttpClient, maybe?)

Iraidairan

I get Cannot POST / – Hondo

I think THIS is the best idea!! – Standee

I also get Cannot POST / – Argentina

@NemanjaAndric how can I solve this? do you get the answer? – Allisan

Also getting: POST localhost:3000/login 404 (Not Found) – Adagio

Answer 4

Since window.location.reload(true) has been deprecated. You can use:

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

to force-reload and clear the cache.

Gangster

Even better than this, use window.location.replace(window.location.href) -- this does not add an entry in the browser history like a simple assignment does. – Zollverein

This does not trigger a reload (at least FF on MacOS tested) until I change the URL by appending a timestamp or somewhat else. – Violinist

Answer 5

According to Martin Schneider answer, you can create a function, and then just call it

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

Good luck ! 😉

Broz

This did not do anything when I placed it behind the body tag of my page. – Cloris

Answer 6

Changing location.reload(true) to location.reload() works. forcedReload is the one which is deprecated.

Lucan

Answer 7

I created a small package in order to have a solution to clean the cache and reload the page if necessary: https://www.npmjs.com/package/clear-cache

clearCache() or clearCache(false) when you only want to clear cache but don't want to reload the page.

Maverick

Answer 8

I think the best and most effective way to refresh (not just reload) the page is using a form with method="post", an empty action, and a submit button, since "post" requests are never cached. Simple and effective, and it even works with no JavaScript at all!

<form action="" method="post">
    <button type="Submit">Refresh</button>
</form>

If you need to do it programatically, you can just hide the button with CSS and trigger the click action in the button with JavaScript.

Thanks to @Martin Schneider for his idea.

Standee

This reloaded the page, but still used cached images in Chrome and Edge. – Cloris

This refreshes the PAGE, not the images. If you want to force images reloading as well, you have to call them with a random query string or timestamp/date string (I.e: <img src="image.jpg?ts=123456789">) – Standee