router.navigate with query params Angular 5

Solution 1:

Can be of that you had placed the bracket which is supposedly for the 1st param but you had encapsulated it on the whole line of route

Your code:

// This is the end of your route statement:  '}}]);' which the close bracket is included
this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

Update route:

place the ] close bracket within the 1st parameter only, try to not place it on the last part of the route statement.

// Update end line: '}});'
this.router.navigate([`${link.split('?')[0]}`], { queryParams: {id: 37, username: 'jimmy'}});

Summary:

this.router.navigate([ url ], { queryParams: { ... } })

Solution 2:

If you want to navigate to a URL string including query params, try using router.navigateByUrl.

For example:

this.router.navigateByUrl('/page?id=37&username=jimmy');

Solution 3:

Try like this:

this.router.navigate(['my-route', 37], { queryParams: { username: "jimmy"}});

Solution 4:

this.router.navigateByUrl('/page?id=37&username=jimmy');

This is better when the params are dynamic.