ngComponentOutlet with ng-content and hydration

I have this piece of code:

@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;
}


But when I enable hydration I get the following exception:

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


Is there a way to implement this using that <ng-content /> without using ngSkipHydration to turn-off?

Continue reading...