AngularJS: How to clear query parameters in the URL?

Question

My AngularJS application needs to have access to the user\'s LinkedIn profile. In order to do that I need to redirect the user to a LinkedIn URL which contains a callback re

Answer 1

The accepted answer worked for me, but I needed to dig a little deeper to fix the problems with the back button.

What I noticed is that if I link to a page using <a ui-sref="page({x: 1})">, then remove the query string using $location.search('x', null), I don't get an extra entry in my browser history, so the back button takes me back to where I started. Although I feel like this is wrong because I don't think that Angular should automatically remove this history entry for me, this is actually the desired behaviour for my particular use-case.

The problem is that if I link to the page using <a href="/page/?x=1"> instead, then remove the query string in the same way, I do get an extra entry in my browser history, so I have to click the back button twice to get back to where I started. This is inconsistent behaviour, but actually this seems more correct.

I can easily fix the problem with href links by using $location.search('x', null).replace(), but then this breaks the page when you land on it via a ui-sref link, so this is no good.

After a lot of fiddling around, this is the fix I came up with:

In my app's run function I added this:

$rootScope.$on('$locationChangeSuccess', function () {
    $rootScope.locationPath = $location.path();
});

Then I use this code to remove the query string parameter:

$location.search('x', null);

if ($location.path() === $rootScope.locationPath) {
    $location.replace();
}

Answer 2

I use

$location.search('key', null)

As this not only deletes my key but removes it from the visibility on the URL.

Answer 3

For Angular >2 , You can pass null to all the params you want to clear

this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})

Answer 4

Just use

$location.url();

Instead of

$location.path();

Answer 5

Need to make it work when html5mode = false?

All of the other answers work only when Angular's html5mode is true. If you're working outside of html5mode, then $location refers only to the "fake" location that lives in your hash -- and so $location.search can't see/edit/fix the actual page's search params.

Here's a workaround, to be inserted in the HTML of the page before angular loads:

<script>
  if (window.location.search.match("code=")){
    var newHash = "/after-auth" + window.location.search;
    if (window.history.replaceState){
      window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
    }
    window.location.hash = newHash;
  }
</script>

Answer 6

I've tried the above answers but could not get them to work. The only code that worked for me was $window.location.search = ''