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?

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

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.

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

Answer 4

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

Answer 5

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

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

to force-reload and clear the cache.

Answer 6

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 ! 😉

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.

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.