Brtdku

I've run into what I believe is a bug in Angular 6/7 routing and I am looking to find a workaround if it is a bug, or fix the routing if it's not.

Navigation to a sibling route fails after navigating to a route that includes a named router outlet which is a child of one of sibling routes.

Given the routing configuration, below, and starting with a URL of /1/documents:

1. If link to "other" is triggered from ModuleComponent, URL changes to /1/other and component is loaded successfully. This is working as expected


2. If a component is loaded into the named outlet (i.e. URL changed to /1/(documents//outlet:test)) and then the same link from (1) is used, then no navigation occurs and an error is logged in the console.

The expectation would be for (2) to result in the navigation completing successfully and for OtherComponent to be displayed.

Another note: Problem persists even if the named router outlet portion of the route is removed (i.e. [{ outlets: { outlet: null } }])

Routing configuration:

export const appRoutes: Routes = [{

  path: '', component: AppOutletComponent,

  children: [

    { path: ':id/other', component: OtherComponent },

    {

      path: ':id', component: ModuleComponent, pathMatch: 'prefix',

      children: [

        { path: '', redirectTo: 'documents', pathMatch: 'full' },

        { path: 'documents', component: DocumentsComponent },

        {

          path: 'test',

          outlet: 'outlet',

          component: OutletChildComponent

        }

      ]

    }

  ]

}];

Here is the error that results:

ERROR

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

Error: Cannot match any routes. URL Segment: '1'

at ApplyRedirects.noMatchError (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/@angular/router@7.0.1/bundles/router.umd.js:2520:20)

at CatchSubscriber.eval [as selector] (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/@angular/router@7.0.1/bundles/router.umd.js:2501:33)

at CatchSubscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/operators/catchError.js:48:31)

at MapSubscriber.Subscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)

at MapSubscriber.Subscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)

at MapSubscriber.Subscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)

at MapSubscriber.Subscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)

at MapSubscriber.Subscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)

at MapSubscriber.Subscriber.error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)

at TapSubscriber._error (https://outlet-routing-bug-shared-minimal.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/operators/tap.js:75:26)

I have created two small apps on Stackblitz that demonstrate the issue:

• With straight app and child components:
  
  
  
  
  • https://outlet-routing-bug-shared-minimal.stackblitz.io
  
  
  • 
    https://stackblitz.com/edit/outlet-routing-bug-shared-minimal
  
  
  
  


• Slightly different behaviour when in lazy-loaded module (this is what I am actually trying to achieve in my app, but tried to pare it down):
  
  
  
  
  • https://outlet-routing-bug-shared.stackblitz.io
  
  
  • https://stackblitz.com/edit/outlet-routing-bug-shared
  
  
  
  

Environment:

• Angular 7.2.1 (also occurs in latest 6)

Hopefully I am not simply misunderstanding or abusing the routing system...

Logged bug with Angular project: https://github.com/angular/angular/issues/28189