Query params not working properly

Question

In my Angular2 app I need to pass some optional arguments to a route. Because they are optional, I decided to use queryParams.

I am using the following code to pass the argument:

public recoverPassword() {
    this.router.navigate(
        ['/access/recover-password', 
        { queryParams: { 'email': this.model.email }} ]
    );
}

I get this URL:

http://localhost:4200/access/recover-password;queryParams=%5Bobject%20Object%5D

As you can see, the parameter is completely wrong. And I can't parse it the in target component. The correct url should be:

http://localhost:4200/access/recover-password;[email protected]

I followed the official doc, but I can't find a working solution.

Answer 1

queryParams should be passed as a second argument (to be more precise, it is just a part of optional second argument NavigationExtras, you can read more about it here), not as a part of first argument which is a route you want to navigate to. This should do the trick:

public recoverPassword() {
    this.router.navigate(
        ['/access/recover-password'], 
        { queryParams: { 'email': this.model.email } }
    );
}