unable to create a redirect for named outlet

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Is this a regression?

Unsure.

Description

I have a named router outlet which I want to default by redirecting the empty path to one of the named paths, e.g.

{ outlet: 'test', path: '', pathMatch: 'full', redirectTo: 'default' },
{ outlet: 'test', path: 'default', component: TestComponent },

This worked when the configuration was in a lazy loaded module, however moving it to the root router configuration now fails to validate. This configuration seems like it should be valid. The only workaround I could find was to use an absolute path, e.g.

{ path: 'test', pathMatch: 'full', redirectTo: '/test/(test:default)' },

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-fikqg2

🔥 Exception or Error

Error: Invalid configuration of route 'test/': a componentless route without children or loadChildren cannot have a named outlet set

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.17
Node: 12.4.0
OS: darwin x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       <error>
@angular-devkit/build-angular   0.802.2
@angular-devkit/core            <error>
@angular-devkit/schematics      <error>
@angular/cdk                    7.3.7
@angular/cli                    8.3.17
@angular/material               7.3.7
@schematics/angular             <error>
@schematics/update              <error>
rxjs                            6.5.3
typescript                      3.5.3
webpack                         4.38.0

Anything else relevant? Nope.

[mduft]

After updating to Angular 14, I got this error for our router configuration. It seems that this was possible all the way from Angular 9 to 13, but no longer for 14:

const ADMIN_ROUTES: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'all',
  },
  {
    path: 'all',
    component: AdminShellComponent,
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'general', outlet: 'admin' },
      {
        path: 'general',
        component: SettingsGeneralComponent,
        canDeactivate: [DirtyDialogGuard],
        outlet: 'admin',
      },
...

we had to replace this with:

const ADMIN_ROUTES: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/admin/all/(admin:general)',
  },
  {
    path: 'all',
    component: AdminShellComponent,
    children: [
      {
        path: 'general',
        component: SettingsGeneralComponent,
        canDeactivate: [DirtyDialogGuard],
        outlet: 'admin',
      },
...

(note that the default redirect for the ‘admin’ panel moved from the children to the outer (main) redirect).

this works nearly as well (for us), since we’re never directly navigating to /all, but always to (empty), so the default redirect will also redirect the ‘admin’ outlet correctly. However if a user manually navigates to the /admin/all route without outlet, this will now no longer correctly set the ‘admin’ outlet to ‘general’…

[pixeldublu]

I also discovered this issue a few days ago after upgrading. Since there was no activity I decided to create a pull request on this. ( #47921 )

Hopefully gets in soon 🤞