location.reload(true) is deprecated

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?

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

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.

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

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

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

to force-reload and clear the cache.

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

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

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.

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.