How to route a not SEF url? angular 2

Question

I'm trying to create a new route for my angular 2 application... The url is the callback from the spotify API after user grant permissions to my app

this is an example of the call back:

http://localhost:8080/callback?code=AQBIIG2Klo0RzZf94a2Ag_gcn_JIrwv2d8N2ABVyCMwxmf1rmLFzq9HsUR08v8MY4ZiQ0Gl6-hWLGqiwtYGADt0TdbKYaD_Z9VKJMFvE97TVs0IsfYfs7ALZpsuVHaa-urSzzFmvZu4PdtyFp7WeMqtrDVDHie6k6NoeuG0LUfUxwmtG7TCfhUZvxY0c0V9bAVEGHiO1Izo_4WgOfNs78IYj1ZvclM-7j-zHAGgLEvwtjyX25vxKng&state=Q8L4joXNk3M8UVQt

I tried this:

const routes: Routes = [
  { path: 'callback/code/:code/state/:state', component: CallbackComponent }
];

And this:

const routes: Routes = [
  { path: 'callback?code=:code&state=:state', component: CallbackComponent }
];

But I cant get the routing works... I always get this message:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'callback' Error: Cannot match any routes. URL Segment: 'callback'

xkill_9 xkill_9 · Accepted Answer · 2017-06-21T20:57:09

Angular 2 differentiates between route parameters(required) and query parameters(optional), in your example, code and state would be query parameters and they shouldn't need to be explicitly defined in the Route's path property but passed as query params.

So you would have a Route defined like this:

const routes: Routes = [
  { path: 'callback', component: CallbackComponent }
];

And you can call it in a template like this:

<a [routerLink]="['/callback', { code: 'SOME_CODE', state: 'SOME_STATE' }]">Component Link</a>

Or programmatically like so:

this.router.navigate(['/callback', { code: 'SOME_CODE', state: 'SOME_STATE' }]);

You should also know that Angular doesn't use ? or & to separate query parameters instead it uses ;, called matrix URL notation.

More info in the official docs: https://angular.io/guide/router#route-parameters-required-or-optional

Hope it helps! fellow Glober :B

PD: I'm assuming you're using the latest router version, it changes a lot with each version.

EDIT: Added another way to navigate to a route with query params.

How to route a not SEF url? angular 2

1 Answers