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?

Does this answer your question? [How to reload a page using JavaScript](https://stackoverflow.com/questions/3715047/how-to-reload-a-page-using-javascript) — Liam, Sep 28 '20 at 09:12
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. — Hamid Shoja, May 11 '21 at 13:10

score 65 · Answer 1 · answered Mar 12 '19 at 17:48

65

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

answered Mar 12 '19 at 17:48

Zachary Schroeder

764
4
6

1

So, in my case, why does TSLint warn me ? : `window.location.reload.bind(window.location)` – Victor Castro May 14 '19 at 12:20
45

What can I do if I want to do a forced reload? – steve Aug 01 '19 at 14:12
19

And now how to force the full reload? – sarkiroka Aug 22 '19 at 04:19
1

location.reload() doesn't work for Edge in production – Daniel May 28 '21 at 15:29
Doesn't work in Chrome also – David.P Nov 12 '22 at 11:37

Matt Seymour · Answer 2 · 2020-12-23T14:21:15.840

57

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.

edited Dec 23 '20 at 14:21

answered Jul 11 '19 at 09:55

Matt Seymour

8,880
7
60
101

score 40 · Answer 3 · edited Jun 28 '21 at 15:50

40

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?)

edited Jun 28 '21 at 15:50

Raphaël Balet

6,334
6
41
78

answered Jan 29 '20 at 01:59

Martin Schneider

14,263
7
55
58

4

I get `Cannot POST /` – yohosuff Mar 12 '20 at 20:33
1

I think THIS is the best idea!! – OMA Nov 06 '20 at 17:28
1

I also get Cannot POST / – Nemanja Andric Dec 16 '20 at 09:57
@NemanjaAndric how can I solve this? do you get the answer? – Tony Lucas Sep 22 '21 at 08:48
Also getting: POST http://localhost:3000/login 404 (Not Found) – inside Jan 06 '22 at 00:08

score 13 · Answer 4 · answered Jan 02 '21 at 21:06

13

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

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

to force-reload and clear the cache.

answered Jan 02 '21 at 21:06

abadillo

195
1
5

15

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. – Speednet Mar 09 '21 at 02:24
1

This does not trigger a reload (at least FF on MacOS tested) until I change the URL by appending a timestamp or somewhat else. – coyer May 03 '21 at 10:15

score 13 · Answer 5 · answered Feb 17 '21 at 21:28

13

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 !

answered Feb 17 '21 at 21:28

Junior Klaus Mombo-Nzahou

181
3
9

This did not do anything when I placed it behind the body tag of my page. – David.P Nov 12 '22 at 11:56

score 8 · Answer 6 · answered Dec 16 '19 at 09:38

8

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

answered Dec 16 '19 at 09:38

Charith Jayasanka

4,033
31
42

score 2 · Answer 7 · answered Nov 20 '20 at 15:14

2

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.

answered Nov 20 '20 at 15:14

Dimitri Dumont

33
7

score 0 · Answer 8 · answered Nov 06 '20 at 17:32

0

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.

answered Nov 06 '20 at 17:32

OMA

3,442
2
32
39

This reloaded the page, but still used cached images in Chrome and Edge. – David.P Nov 12 '22 at 11:32
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: ) – OMA Dec 19 '22 at 16:12

location.reload(true) is deprecated

8 Answers8

Linked