CODEWITHSUNDEEP
angularnavigation
Raults
Raults

Reputation: 306

using special character in router.navigate appears to cause infinite loop

Gmail allows for adding additional stuff at the end to email the same address even though the email is already in use. Like so:

[email protected]

We use this for testing, sometimes. Unfortunately right now, whenever I use this kind of email to navigate I get an infinite loop from the what I think is the built-in URI encoder for router.navigate() caused by the + symbol

I tested other special characters and have come to the conclusion that this might be the case with this example:

gotoconfirmationpage() {
    this.router.navigate(['/confirmation', '%@gmail.com']);
  }

and the router looks like this:

  {
    path: 'confirmation/:email',
    component: ConfirmationComponent
  },

I've also tried pre-encoding before I navigate, but the same thing. It seems like for any character that gets encoded, which is % as well as others like #, &, and so on, once you navigate you get something like this:

enter image description here

and your history looks something like this...

enter image description here

I'm no expert, but I'm pretty sure the encoding result for the % symbol is %25 and it looks like it gets encoded and then the navigation sees it again and goes "oh look another one!" and then we get %25252525252525252525... to infinity.

I checked the dev page for navigation() and it looks like this might be an existing issue but I've yet to find the solution. If anyone has any information or a solution, it'd be greatly appreciated.

Upvotes: 1

Views: 2481

Answers (3)

Tri42
Tri42

Reputation: 146

I ran into this error as well but could not find a solution anywhere. For us it looks like we got a redirect to another page because of the AngularFireAuthGuard, were routed to the page then rerouted back after login (although we were already logged in). The route had query params and those then got encoded like follows

40.js:251 home?day=2&week=5
40.js:251 home%3Fday%3D2&week%3D5
40.js:251 home%253Fday%253D2&week%253D5
40.js:251 home%25253Fday%25253D2&week%25253D5
40.js:251 home%2525253Fday%2525253D2&week%2525253D5
...

Our wildcard route then would catch this as an unrecognized route and stick us in this forever loop. Removing the wildcard route solved the error but I wanted to keep the wildcards...

I ended up going into the app.component.ts and subscribing to the router events, looking for a % within the URL and redirecting manually from there to stop the loop.

this.router.events.subscribe(event => {
  if (event instanceof NavigationStart && event.url.indexOf('%') > -1) {
    this.router.navigate(['/tabs/home']);
  }
});

Would love to find a proper solution for why the params are getting encoded in the first place, or why the auth guard is not working correctly, but this is functional for now.

Upvotes: 0

Raults
Raults

Reputation: 306

I'm sorry to tell everyone that if you have this bug, you won't find the answer here, although you might find @Rahul Tokase answer to be helpful so check his out.

The issue ended up being an unexpected infinite loop with our internal navigation service feeding into the router app. It was encoding the URI and then doing it again over and over, so you'd have % and that would become %25 and that would become %2525 and so on. Good luck out there.

Upvotes: 1

Rahul Tokase
Rahul Tokase

Reputation: 1218

Can you please try encoding the URI component using the following method.

 gotoconfirmationpage() {
    this.router.navigate(['/confirmation', encodeURIComponent('%@gmail.com')]);
  }

In the component you might need to decodeURIcomponent as well to get the actual value.

Upvotes: 3

Related Questions