QueryParams getting encoded when passing true through CanActivate guard in Angular

Question

in my Angular app, when I navigate to a URL containing query params through a CanActivate guarded route, my URL becomes encoded and thus, does not reach it's intended component. Example:

I copy paste into browser:

http://localhost:4200/orders?pickup=irvine-1-ca

it correctly returns true through this guard:

    canActivate(
        route: ActivatedRouteSnapshot, state: RouterStateSnapshot
    ):
        | boolean
        | UrlTree
        | Promise<boolean | UrlTree>
        | Observable<boolean | UrlTree> {


        return this.authService.user.pipe(

            take(1),
            map(user => {
                const isAuth = !!user;

                console.log("authGuard", user)

                if (isAuth) {
                    return true;
                }

                return this.router.createUrlTree(['/account'], { queryParams: { mode: "login" } });
            })
            
            );
        }
    }

However, the URL encodes to and redirects the following after passing true:

http://localhost:4200/orders%3Fpickup%3Dirvine-1-ca

How do I preserve the query params correctly? Help appreciated. Thanks in advance.

EDIT:

Found a fairly crude workaround. On the error page that routing to the encoded route causes, automatically decode the route and navigate to the properly encoded version. If anyone has a more elegant solution, I'd love to hear it.

export class ErrorPageComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    // Fix for guard encoding URL with query params. Decoding the URL and redirecting to it if user lands on error page.
    const url = decodeURIComponent(this.router.url);
    if (url !== this.router.url) {
      this.router.navigateByUrl(url);
    }
  }
}

Answer 1

You can use decodeURIComponent()

decodeURIComponent('http://localhost:4200/orders%3Fpickup%3Dirvine-1-ca')

which should return:

'http://localhost:4200/orders?pickup=irvine-1-ca'