Angular Router navigate and reload need to render the component once but renders twice

Question

I am having a special condition where i need to redirect to a url and reload.

I am using this method from router:

this.router.navigateByUrl('login'); this.reload();

Where this.reload() is the function that is working outside the angular zone to force reload the page. I need to force reload as i don't have control with some assets coming from server.

The code of reload is:

public reload(): any { return this.zone.runOutsideAngular(() => { location.reload() }); }

The issue is:

I am navigated to the login in the beginning and then the page is reloaded which is the default behavior.

Required output:

just navigate without rendering the component and reload like when we hit some unauthorized url we are redirected to the login page in most of the sites.

You might skip the navigateByUrl and instead replace the window's location property: location.replace('myUrl'); — Philipp
– Philipp, Commented Sep 12, 2017 at 11:41
It only reloads more and neither change the url of the routes. — PaladiN
– PaladiN, Commented Sep 12, 2017 at 12:20

PaladiN · Accepted Answer · 2017-09-17 11:56:45Z

If anyone is interested in doing the things as i am doing, I have solved the issue by first going to the url and then reloading the page.

First import Location:

import { Location } from "@angular/common";

Then use go() to navigate to the certain url you are expecting.

this.location.go('login');

then use the reload method to reload the browser.

this.reload();

where the reload function is:

public reload(): any { return this.zone.runOutsideAngular(() => { location.reload() }); }

Note:

This method is only suitable if you want to navigate and reload without showing the page load to the user twice.

Collectives™ on Stack Overflow

Angular Router navigate and reload need to render the component once but renders twice

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related