Cannot match any routes. URL Segment: '%2F' after login

[StefanKoenigMUC]

Hi all,

after logging in, my application throws this error:

core.js:4061 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%2F'
Error: Cannot match any routes. URL Segment: '%2F'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2471)
    at CatchSubscriber.selector (router.js:2452)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at ThrowIfEmptySubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at resolvePromise (zone.js:832)
    at resolvePromise (zone.js:784)
    at zone.js:894
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:27791)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:601)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:507)
    at ZoneTask.invoke (zone.js:492)

I already set initialNavigation to false and tried the steps proposed here:

https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/routing-with-the-hashstrategy.html

My auth config (if this matters) looks like this, by usage of implicit flow:

authConfig: {
		issuer: 'https://localhost:5001',
		redirectUri: 'http://localhost:4200/',
		postLogoutRedirectUri: 'http://localhost:4200/',
		clientId: 'api-client',
		responseType: 'id_token token',
		silentRefreshRedirectUri: 'http://localhost:4200/silent-refresh.html',
		showDebugInformation: false,
		scope: 'openid api',
		silentRefreshTimeout: 25000,
		timeoutFactor: 0.75,
		sessionChecksEnabled: true,
		clearHashAfterLogin: false
	},

My application routes are like that:

const routes: Routes = [
  // { path: 'home', component: BoxesPanelComponent, canActivate: [LoginAuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', component: BoxesPanelComponent, canActivate: [LoginAuthGuard] },
];

Do you have any hints, how I can fix that exception?

Thanks in advance,

[nurlanmikayilov]

Hi, I have the same issue in version 9.1.
I have tried version 9.0 it worked for me.

[manfredsteyer]

Hi,

I have currently a hard time, reproducing this. Can you please let me know what to do to make this issue in our sample application happen?

[StefanKoenigMUC]

think I found the issue - I used your example for authentication service and adapted it to my belongings.

public login(targetUrl?: string) {
  var url = targetUrl || this.router.url;
  console.log('target url for state after login: ' + url);
  this.oauthService.initImplicitFlow(url);
}

was before

this.oauthService.initImplicitFlow(encodeURIComponent(targetUrl || this.router.url));

but the loaded state is not decoded (anymore?) - so the argument sent to the router was an encoded string (in my example %2F or '/').

After removing encoding or adding manual decoding it worked again.

Maybe there was some changed behavior internally?

[jeroenheijmans]

It might well be related to this commit that indeed seems to be a breaking change to fix #415

(Just a hunch)

[jeroenheijmans]

I can confirm that this was a breaking change in 9.1.0. I just upgraded my sample project and as you can see in the commit I also needed to remove my own usage of encodeURIComponent because it is now in the library.

In short, my repro would be: check out the above-linked commit, but bring back the encodeURIComponent as it was working before (in 9.0.0 and below), then start the app up and navigate to "Admin 2" page. After the redirect back the routing is broken.

There's basically two good options:

1. Revert it in a 9.1.1 version and remove 9.1.0 from npm, then slate the change for 10.x as a breaking change
2. Note it in the readme as a minor(?) breaking change for 9.1.0 and direct people there

I might create a small PR for option 2. Option 1 would require a bit more work from Manfred, I think.

[jeroenheijmans]

@manfredsteyer Could be good to merge my PR if there's no bandwidth to do the other option. Then the action needed from users gets some more visibility.