angular router navigate then reload

Question

So I want to reload the app after navigating to a specific route ..

I use router.navigate to navigate to certain route based on user role and that works fine but I have to reload the page after routing if coming from sign in page (not every time user opens that certain route) - and reloading here is to update page language depending on user's language

so what i tried to do is

  else if(this.sp.role === 'Admin') {
      console.log('ooo')
      this.router.navigate(['/admin/dashboard']); 
      this.window.location.reload();

but that reloads the sign in page

Navigation to the same component does not reloads the data - stackoverflow.com/a/68503542/7573844 — Evgeny Nozdrev
– Evgeny Nozdrev, Commented Jul 23, 2021 at 18:47

Vlad · Accepted Answer · 2019-03-28 09:39:00Z

154

Simple

this.router.navigate(['path/to'])
  .then(() => {
    window.location.reload();
  });

answered Mar 28, 2019 at 9:39

Vlad

8,6223 gold badges63 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

amit sutar Over a year ago

its take too much time to reload page

vikingsteve Over a year ago

@amitsutar sometimes you require to reload the page. This answer is for those circumstances

Coen Damen Over a year ago

the answer I have been searching for for a long time, simple and effective

CularBytes Over a year ago

If that is to slow, do a real reload: window.location.href = window.location.protocol + '//' + window.location.host + '/path/to';. This is more in line with user expectations.

Lord Midi Over a year ago

problem: you can see the navigated page flashing and then the reload fires. Not nice.

|

danielreiser · Accepted Answer · 2018-12-01 15:07:54Z

9

What you could do is shift the reload logic to the actual component which needs to be reloaded. You can subscribe to the NavigationEnd event and then check the route you're coming from e.g.

this.router.events
  .pipe(
    filter(value => value instanceof NavigationEnd),
  )
  .subscribe(event => {
  if (event.url === 'http://mypreviousUrl.com') {
    this.window.location.reload();
  }
});

edited Dec 1, 2018 at 15:07

answered Dec 1, 2018 at 11:08

danielreiser

5,3605 gold badges34 silver badges45 bronze badges

Comments

Priesten · Accepted Answer · 2021-09-28 13:08:51Z

9

Simply do

location.href = '/admin/dashboard';

answered Sep 28, 2021 at 13:08

Priesten

911 silver badge3 bronze badges

1 Comment

Krunal Jethva Over a year ago

It's perfect for my use case no navigating to route and refresh resulting in flash screen

Martijn van der Bruggen · Accepted Answer · 2022-07-06 15:46:19Z

i put this in my helperService:

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
  }

then this in the file that contains the navigating logic:


_this.router.navigate(['somecomponent/anothercomponent']).then(() => {
    _this.helperService.reloadCurrentRoute();
});

All it does is store current url then navigates to the application root and back to current url forcing a reload.

Note that _this might be just this in your case depending on where and how it's nested in arrow functions. Window.location.reload() did not work for me, it ended up as an unauthorized route forcing me back to the application root route.

Collectives™ on Stack Overflow

angular router navigate then reload

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related