In an angular 16 app I have a simple UI component which takes content and puts it into a draggable pane.

draggable-paneponent.html

<ion-apple-clips #paneContainer>
    <ng-content></ng-content>
</ion-apple-clips>

On my main page I was using this component to wrap a router outlet

main.page.html

<app-draggable-component>
    <router-outlet></router-outlet>
</app-draggable-component>

This worked, but I had an issue with content not being cleared properly when the child route changed, so I created a new component which included the router-outlet directly rather than relying on <ng-content>

router-draggable-pane.html

<div #paneContainer>
  <router-outlet></router-outlet>
</div>

The router-draggable-pane component doesn't work, though the original does. From debugging, I'm sure the route is loading correctly, but it seems like Angular doesn't realise which router outlet to put the loaded content into. I'm not getting any error messages, but the component remains blank.

I've been trying to debug this but am at a loss. Is there any reason that Angular wouldn't recognise a router outlet defined in a child component, directly, as opposed to being injected with an <ng-content> tag?