Angular2, how to clear URL query params on router navigate

As DeborahK pointed out, when I was navigating to this.router.url, that URL already had the url params embedded. To solve I stripped the params off the URL as a string, and then used navigateByUrl to jump there.

let url: string = this.router.url.substring(0, this.router.url.indexOf("?"));
this.router.navigateByUrl(url);

If you don't want to reload the page you can also use Location

import { Location } from '@angular/common';
[...]
this.location.replaceState(this.location.path().split('?')[0], '');

this.location.path() provides you with the current path. You can remove the params by resetting the page's path with everything in the URL before the ?.

You can add replaceUrl: true in your navigation extras. This way, the router will navigate to the same page but you still remain in the same state in history with the url parameters gone, while still allowing you to go back to the previous route.

From the docs:

Navigates while replacing the current state in history.

this.router.navigate([], { replaceUrl: true});

Using navigateByUrl will drop off the query parameters if you pass it a URL without the query parameters.

Or you could try:

this.router.navigate(this.router.url, { queryParams: {}});

NOTE: navigate and not navigateByUrl

Does that work?