Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Router named outlet in child route of an empty path doesn't work

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Is this a regression?

Description

I have a route with empty path, and in it's children I would like to define a named outlet route in the following way.

{
  path: '',
  children: [
    {
      path: 'mywidget',
      component: MyWidgetComponent,
      outlet: 'widget',
    },
    {
      path: '',
      component: MainPageComponent,
    }
  ]
},
{
  path: 'other',
  component: OtherPageComponent
},

This config fails with the following error.

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

Giving a path name to the parent route solve the problem, but I would like to use an empty path there because it’s a default route.

{
  path: 'main',
  children: [
    {
      path: 'mywidget',
      component: MyWidgetComponent,
      outlet: 'widget',
    },
    {
      path: '',
      component: MainPageComponent,
    }
  ]
},
{
  path: 'other',
  component: OtherPageComponent
},

🔬 Minimal Reproduction

Not working: https://stackblitz.com/edit/angular-named-outlet-empty-path

And this is the fix that I’m trying to avoid: https://stackblitz.com/edit/angular-routing-child-named-outlet

🔥 Exception or Error

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mywidget'
Error: Cannot match any routes. URL Segment: 'mywidget'
at ApplyRedirects.noMatchError (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/@angular/router@7.1.3/bundles/router.umd.js:2557:20)
at CatchSubscriber.eval [as selector] (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/@angular/router@7.1.3/bundles/router.umd.js:2538:33)
at CatchSubscriber.error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/operators/catchError.js:48:31)
at MapSubscriber.Subscriber._error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)
at MapSubscriber.Subscriber.error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)
at MapSubscriber.Subscriber._error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)
at MapSubscriber.Subscriber.error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)
at MapSubscriber.Subscriber._error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93:26)
at MapSubscriber.Subscriber.error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73:18)
at TapSubscriber._error (https://angular-named-outlet-empty-path.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/operators/tap.js:75:26)

🌍 Your Environment

Angular Version:

@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cli                      6.1.5
@angular/platform-server          7.0.2
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.3.3
typescript                        2.7.2
webpack                           4.9.2