I'm using Angular 9 with UpgradeModule for an app which is loaded inside a legacy JSP web application. For that reason, I'm also using the MockLocationStrategy
to prevent the router messing up the legacy app urls (while still using router to change views inside the Angular app).
The Angular app works perfectly for the most part of time. The problem is that after a change on the legacy url (the one in the address bar), Angular router fails to navigate to a route with the error:
TypeError: Cannot read property 'extractedUrl' of undefined
at eval [as project] (eval at <anonymous> (libs.js:567), <anonymous>:1:440708)
at e._next (eval at <anonymous> (libs.js:567), <anonymous>:1:320375)
at e.next (eval at <anonymous> (libs.js:567), <anonymous>:1:16834)
at e.notifyNext (eval at <anonymous> (libs.js:567), <anonymous>:1:321037)
at e._next (eval at <anonymous> (libs.js:567), <anonymous>:1:27334)
at e.next (eval at <anonymous> (libs.js:567), <anonymous>:1:16834)
at eval (eval at <anonymous> (libs.js:567), <anonymous>:1:24524)
at Q (eval at <anonymous> (libs.js:567), <anonymous>:1:27870)
at e._innerSub (eval at <anonymous> (libs.js:567), <anonymous>:1:320605)
at e._next (eval at <anonymous> (libs.js:567), <anonymous>:1:320440)
at j (zone.min.js:1)
at j (zone.min.js:1)
at zone.min.js:1
at e.invokeTask (zone.min.js:1)
at Object.onInvokeTask (eval at <anonymous> (libs.js:567), <anonymous>:1:128743)
at e.invokeTask (zone.min.js:1)
at t.runTask (zone.min.js:1)
at g (zone.min.js:1)
at t.invokeTask [as invoke] (zone.min.js:1)
at _ (zone.min.js:1)
I was able to identify the portion of Angular Router code that throws the error:
export function applyRedirects(
moduleInjector: Injector, configLoader: RouterConfigLoader, urlSerializer: UrlSerializer,
config: Routes): MonoTypeOperatorFunction<NavigationTransition> {
return switchMap(
t => applyRedirectsFn(moduleInjector, configLoader, urlSerializer, t.extractedUrl, config)
.pipe(map(urlAfterRedirects => ({...t, urlAfterRedirects}))));
}
[source]
The applyRedirects
is used to apply transformations on NavigationTransaction
object duing the route navigation process. The strange parte that i'm not able to understand is that, when debugging, the transaction object is correctly defined inside the previous operator on the stream but not when it reaches the switchMap
on applyRedirects
.
switchMap(t => {
const transition = this.transitions.getValue();
eventsSubject.next(new NavigationStart(
t.id, this.serializeUrl(t.extractedUrl), t.source,
t.restoredState));
if (transition !== this.transitions.getValue()) {
return EMPTY;
}
// This delay is required to match old behavior that forced
// navigation to always be async
return Promise.resolve(t); // HERE T IS DEFINED
}),
// ApplyRedirects
applyRedirects(
// INSIDE applyRedirects T IS UNDEFINED
this.ngModule.injector, this.configLoader, this.urlSerializer,
this.config),
[source]
Can anyone help me understand what might be going wrong? I'm even considering the it might be a Angular Router bug.
PS: Unfortunately, I work at a financial institution with a lot of regulations and I'm not able to post any source code or screenshots, but I'll try to provide as many information as possible.
question from:
https://stackoverflow.com/questions/65910316/angular-router-navigation-error-cannot-read-property-extractedurl-of-undefine