Angular router navigation error: Cannot read property 'extractedUrl' of undefined

Question

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

Answer 1

Waitting for answers