44

This is how the routes and component look like:

routes.config

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: 'users/new', component: NewUserComponent },    
];

new-user.component

 addField(newName: string){
        this.items.push({ 
          name: newName,
      })
      this._router.navigate(['/users'])

Is Angular2 supposed to refresh the page on router.navigate?

What else to use instead of router.navigate to avoid any page refresh?

Here is the proof: enter image description here

Cristian Muscalu
  • 9,007
  • 12
  • 44
  • 76

5 Answers5

98

You are probably calling the router.navigate function inside a click event.

<button class="btn btn-default"
    (click)="save()">Save</button>

And the save function being something like

save() {
    //Do stuff
    this._router.navigate(['/users', { id: userId } ]);
}

This works on IE11 and Edge browsers, but would reload the application in Chrome.

This is because of a missing type in the button element, if the button is inside a <form></form> Chrome will use 'submit' as it's default value. Causing a form submit when the button is clicked.

It's preferred to always set a type when using the button element See here:

So changing the HTML to

<button class="btn btn-default" type="button"
        (click)="save()">Save</button>

Will make it work on all 3 browsers.

My previous solution also works, (By returning false it would prevent the default action. a.k.a. submitting the form) but I think the above one is preferred.

Obsolete answer but kept for posterity:

<button class="btn btn-default"
        (click)="save(); false">Save</button>
Pierre Henry
  • 16,658
  • 22
  • 85
  • 105
ElSnakeO
  • 1,174
  • 1
  • 11
  • 11
  • Both solutions work fine, but the one you suggested makes more sense. So if i understand well the bottom line is ... never use `button type="submit"` in a SPA? :-D – Cristian Muscalu Jul 01 '16 at 13:22
  • Thank you very much. I've tried to fix it with event.preventDefault() but this solution is much better. – Johannes Sep 19 '16 at 12:36
  • hm, for me adding the false works as well, but would rather do it with the type... but don't have buttons, but regular links... and type="button" on regular links does not seem to do the trick – DS_web_developer Oct 18 '16 at 09:45
  • In my case component is reloading. ex:- Initially i am in rout-1 and modved to route-2, If i am come back to route1. that route1 component is reloading again(constructor is getting called) is that expected behaviour – ayyappa maddi Mar 15 '17 at 13:09
  • Thankyou! I was facing this problem of navigation happening twice in Edge when router.navigate was called. I was trying other solutions. But your answer really explains why it was happening twice. This solution worked. – HS. Sep 18 '19 at 08:46
  • what about if we're mapping (keydown) in input form element though?? It behaves in the same way like we're submitting the form. I don't think type='button' applies there, does it? – Ragas Gnuluk Nov 03 '20 at 15:07
3

I had the same effect (page refresh when navigating to details page) using a simple <a href="/details/1"></a> link. The solution was to use the angular link: <a [routerLink]="['/details', 1]"></a>

Remy
  • 502
  • 6
  • 19
  • [routerLink] indeed works, in my case I had logic to perform before nav so [routerLink] is not an option. – ttugates Sep 01 '17 at 17:09
2

I know its simple method but you can also set this code to refresh route on success event after all operation finished.

window.open('users', '_self');

It will reload and redirect to user page.

Kavi Joshi
  • 173
  • 2
  • 5
1

For me works nice (from component code):

window.location.href = "/sth";

it automatically reloads page to given url part.

Krystian
  • 2,221
  • 1
  • 26
  • 41
0

This covers an AngularJS/Angular hybrid situation. I'm adding the answer because this question is one of the top results when you google angular router page reload issues. Hopefully it'll save somebody else time.

In my case I had a very simple Angular 2 (actually 5) route configuration that mostly worked except for one case where a link from one route to another would inexplicably cause a page reload. I had checked for all the usual suspects, form, submit button, etc.

It turned out that somewhere in an AngularJS component that was displayed at the time the link was clicked, there was an ng-include. The documentation warns about this for a reason I guess. Reshuffled the template so the ng-include could be changed to a templateUrl and all was well.

Tommy Hansen
  • 105
  • 1
  • 6