How to activate a nested, named router outlet

Starting on a fresh Angular 17 project (+SSR/SCSS but shouldn’t have any impact on the issue), this is my bootstrapped app.component.html with the default outlet:

<h1>App Component</h1>
<router-outlet />

And this is the child.component.html with the nested, named outlet:

<p>childcomponent works!</p>
<router-outlet name="userProfile"></router-outlet>

A third “demo” component should be rendered in this named outlet. This is my router setup:

export const routes: Routes = [{
  path: "demo",
  component: DemoComponent,
  outlet: "userProfile"
}, {
  path: "global/en",
  component: ChildComponent,
}];

I can call localhost:4200/global/en(userProfile:demo) without any error message but the DemoComponent is never rendered inside the named outlet. Putting the demo route in the “children” array of the main route doesn’t work either. When accessing the nested outlet from the angular dev tools, it throws an “Outlet not activated” error. What am I missing here ?