Angular2 router.navigate refresh page

by

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(["https://stackoverflow.com/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>

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. How to determine previous page URL in Angular?
  4. How do I create a singleton service in Angular 2?
  5. How to go back last page
  6. Angular: Cannot find a differ supporting object ‘[object Object]’
  7. Angular2 multiple router-outlet in the same template
  8. How to get current route
  9. ‘router-outlet’ is not a known element
  10. Angular2: Make route paths case insensitive
  11. Angular 2 Scroll to top on Route Change
  12. Angular 2 unit testing components with routerLink
  13. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  14. Angular2 – Redirect to calling url after successful login
  15. How can I conditionally disable the routerLink attribute?
  16. Using Resolve In Angular2 Routes
  17. Angular 2: getting RouteParams from parent component
  18. Angular2 – Interaction between components using a service
  19. Angular2 router keep query string
  20. Angular 2 passing object via route params possible?
  21. Multiple canActivate guards all run when first fails
  22. Can’t reload/refresh active route
  23. How do I navigate to a sibling route?
  24. Angular2 routing / deep linking not working with Apache 404
  25. Pass parameter into route guard
  26. Angular 2 – Routing – CanActivate work with Observable
  27. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  28. Angular2 Routing – keeping state of component when route changes [duplicate]
  29. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  30. Angular 2 different components with same route

Leave a Comment