CODEWITHSUNDEEP
angularangular-ui-routergoogle-calendar-api
philippe.kienner
philippe.kienner

Reputation: 105

redirect from google calendar api after authentication to an angular route, problem with ? in url

In the process of allowing my app to access a google calendar from cloud functions, the user has to get a code to allow me to retrieve the token. For this the user has to authenticate and allow, after this the user is redirected to a url that I provide. To this redirect the code is added in form of https://myapp.web.app/myroute?code=someCode&scope

https://myapp.web.app/myroute is a route of an angular app. But it seems that the router cannot handle this and brings following error: Cannot match any routes. URL Segment: 'myroute'

Is there way to have the angular router handle this? I'm on angular 6.0.8

I get the error:

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

at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382) [angular]

in the app-routing.module.ts I have:

imports ...

const routes: Routes = [
{ path: 'myroute/:someInfo',     component: myRouteComponent, canActivate: [AuthGuard]},
{ path: 'someOtherRoute',     component: someOtherComponent, canActivate: [AuthGuard]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

I think that the problem is that the angular router cannot handle the urls with ? as a separator.

I would be glad to have your opinion.

Thanks in advance for your help.

Upvotes: 0

Views: 198

Answers (1)

mickdev
mickdev

Reputation: 2885

Of course Angular can handle query params ! :)

The issue is coming from your route definition: 

{ path: 'myroute/:someInfo',     component: myRouteComponent, canActivate: [AuthGuard]},

Will match myroute/anything-else but not myroute. If you want to also match myroute use something like this :

const routes: Routes = [
{ path: 'myroute/:someInfo',     component: myRouteComponent, canActivate: [AuthGuard]},
{ path: 'myroute',     component: myRouteComponent, canActivate: [AuthGuard]},
{ path: 'someOtherRoute',     component: someOtherComponent, canActivate: [AuthGuard]}
];

Edit: In your component, you will have to subscribe to ActivatedRoute to retrieve the code https://angular.io/guide/router#activated-route

Upvotes: 0

Related Questions