Angular2 issues retrieving URL parameters

Question

I am currently implementing a confirm email process in my angular 2 application (.net core 2 backend). The workflow currently goes: user registers -> they are sent an email to confirm their account -> they click the link -> they're directed to an angular component that SHOULD read the userId and generated token. The Url in the browser is http://localhost:35000/confirm-email?token=CfDJ8OR7TVlXC69LsUgYal539cq4%2FcxvIXYoyaXcvLXQofMfK8d%2Bp6JE02IBATC49meM8bNSq9pgzq%2B7MspZLt7h1hfetLF2iVkXRkQZHFiJluhRpJbZ7kkafpyrbXjs82KFjkzVSOEDGV4sC6x4%2Bd0i0SXejfK%2F%2FpZgKTnOhdvB%2FwbLK5iauwdDXnjV7ZN7LHA0HInpvBPF2OOpdjJ%2FXicRLYLq5ic4Pz7SnXz0iwOTj4HJQIZAX%2FA1DqgvrPR6vuaOwQ%3D%3D&userId=5da26d4c-f737-481c-9142-affd89e8e9d6

which routes me to the confirm-email component below however I am unable to read my params token and userId properly - they are always undefined. The simplified code for my angular component is below:

export class ConfirmEmailComponent implements OnInit {
    emailConfirmed: boolean = false;

    constructor(private userService: UserService,
        private router: Router,
        private activatedRoute: ActivatedRoute) { }

    ngOnInit() {
        this.activatedRoute.params.subscribe((params: Params) => {
          let token = params['token'];
          let userId = params['userId'];

          this.userService.confirmEmail(token, userId).subscribe(
            (data) => {
              this.emailConfirmed = true;
            });
        });
    }
}

Can you please console.log(params) and show us the result? Thank you — Gianluca Paris
– Gianluca Paris, Commented Jan 23, 2018 at 16:12
Also your route path should be defined as: path: 'confirm-email/:token/:userId', is it right? — Gianluca Paris
– Gianluca Paris, Commented Jan 23, 2018 at 16:18

Armen Vardanyan · Accepted Answer · 2018-01-23 16:19:16Z

4

You need to subscribe to activatedRoute.queryParams, not params, obviously, as you pass data through query parameters, not predefined params ('my-url?key=value' instead of 'my-url/:someParam'). Just like this:

this.activatedRoute.queryParams.subscribe((params: Params) => { //etc

answered Jan 23, 2018 at 16:19

Armen Vardanyan

3,3251 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 issues retrieving URL parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related