angular - ngComponentOutlet med ng-content och hydrering

Jag har den här kodbiten där jag vill rendera en komponent dynamiskt:

@Component({
  selector: 'app-dynamic',
  template: `<ng-content /><ng-content select="main" />`,
})
export class DynamicComponent {}

@Component({
  selector: 'my-app',
  template: `<ng-container
      *ngComponentOutlet="outlet; content: [[first], [second]]"
    />
    <div #first>
      <h1>CONTENT1</h1>
      <main>content1 text</main>
    </div>
    <div #second>
      <h1>CONTENT2</h1>
      <main>content2 text</main>
    </div>`,
  imports: [NgComponentOutlet],
})
export class MyApp {
  outlet = DynamicComponent;
}

Men när jag aktiverar hydrering får jag följande undantag:

NG0503: During serialization, Angular detected DOM nodes that were created outside of Angular context and provided as projectable nodes (likely via `ViewContainerRef.createComponent` or `createComponent` APIs). Hydration is not supported for such cases, consider refactoring the code to avoid this pattern or using `ngSkipHydration` on the host element of the component.

<my-app>
  <app-dynamic>…</app-dynamic>  <-- AT THIS LOCATION
  …
</my-app>

Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.

 Find more at https://angular.dev/errors/NG0503

Finns det ett sätt att implementera detta med <ng-content /> utan att använda ngSkipHydration för att stänga av?