How to Fix: "RangeError: Maximum call stack size exceeded" in angular7 when passing token as parameter

Im trying to accomplish "Password Recover" functionality. The password reset URL contains email parameter and a token (Which is generated using GeneratePasswordResetTokenAsync(TUser) dotnet core identity function). Now the problem is whenever that reset URL gets load on the browser, it is giving: RangeError: Maximum call stack size exceeded

Screenshot attached

To identify the problem, I removed the token from url and hardcoded in a variable inside the code to observe the results, but it worked perfectly fine with no exceptions what so ever.

Moreover, there is no circular dependency in the component that could cause the problem. I don't understand what is causing this issue. screenshot attached PS: I'm using Angular 7 on the front-end and C# on the back-end

EDIT: on further investigation, I have found that exception occurs whenever token contain either (%2) in between the token string {when I encode the URL with "System.Web.HttpUtility" } OR / {when I don't perform the encoding}

See Image

Are there any restrictions on URL? Code snippet from app.component.ts

setTimeout(() => {
  if (this.isUserLoggedIn) {
    this.alertService.resetStickyMessage();
    this.checkAvailableStocks();
    if (this.isUserLoggedIn && this.UserRole == 'Worker/Staff' && !this.storageManager.getData(DBkeys.SELECTED_COMPANY)) {
      let dialogRef = this.dialog.open(CompanyDialogeComponent, {

        //width: '800px',
        data: {},
        disableClose: true
      });

      dialogRef.afterClosed().subscribe(result => {

      });
    }
    //if (!this.authService.isSessionExpired)
    this.alertService.showMessage("Login", `Welcome back ${this.userName}!`, MessageSeverity.default);
    //else
    //    this.alertService.showStickyMessage("Session Expired", "Your Session has expired. Please log in again", MessageSeverity.warn);
  }
}, 2000);


this.alertService.getDialogEvent().subscribe(alert => this.showDialog(alert));
this.alertService.getMessageEvent().subscribe(message => this.showToast(message, false));
this.alertService.getStickyMessageEvent().subscribe(message => this.showToast(message, true));
this.authService.reLoginDelegate = () => this.shouldShowLoginModal = true;
this.authService.getLoginStatusEvent().subscribe(isLoggedIn => {
  this.isUserLoggedIn = isLoggedIn;


  if (this.isUserLoggedIn) {
    this.initNotificationsLoading();
  }
  else {
    this.unsubscribeNotifications();
  }

  setTimeout(() => {
    if (!this.isUserLoggedIn) {
      this.alertService.showMessage("Session Ended!", "", MessageSeverity.default);
    }
  }, 500);
});

this.router.events.subscribe(event => {
  if (event instanceof NavigationStart) {
    let url = (<NavigationStart>event).url;

    if (url !== url.toLowerCase()) {
      this.router.navigateByUrl((<NavigationStart>event).url.toLowerCase());
    }
  }
});

I have faced similar problem when i was working on Angular with dotnet core.

You should remove this code from app component because this piece of code is making password reset token that was generated by dotnet core into lower case and redirecting after lower case

this.router.events.subscribe(event => {
 if (event instanceof NavigationStart) {
let url = (<NavigationStart>event).url;

if (url !== url.toLowerCase()) {
  this.router.navigateByUrl((<NavigationStart>event).url.toLowerCase());
}
  }
});