Error NG04002: Cannot match any routes when navigating to nested route in Angular with named router outlet

I have this code in router.js

export const routes: Routes = [
    {
        path: 'w', loadComponent: () => import('./components/workspace/workspace.component').then(c => c.WorkspaceComponent),
        children: [
            {
                path: 'list', loadComponent: () => import('./components/example-list/example-list.component').then(c => c.ExampleListComponent), outlet: 'workspace'
            },
        ]
    }
];

Is a array of routes.

If you check the code above, when i navigate to w/list, shows this error in my console.

**ERROR Error: NG04002: Cannot match any routes. URL Segment: 'w/list'
at Recognizer.noMatchError (router.mjs:3705:12)**

This is the workspace.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-workspace',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './workspace.component.html',
  styleUrl: './workspace.component.scss'
})
export class WorkspaceComponent {

}

The workspace.component.html i have this implementation:

<router-outlet name="workspace"></router-outlet>

The strange thing is that when I remove the 'list' and leave just '', when I access the 'w' route, the ExampleList component is simply generated in the outlet, but when I put a name, it is not.

Angular CLI: 17.3.8 Node: 18.19.1 Package Manager: npm 10.2.4

You are incorrectly navigating to ExampleListComponent with the auxiliary route. The route with ['w', 'list'] works fine without the named router outlet.

For working with named router outlet and auxiliary route, your route should be:

['w', { outlets: { workspace: ['list'] } }]

Hence, to navigate through the component:

this.router.navigate(['w', { outlets: { workspace: ['list'] } }]);

or work with [routerLink] attribute

<a [routerLink]="['w', { outlets: { workspace: ['list'] } }]">
  Example List
</a>

Demo @ StackBlitz