ng-template gets rendered twice during hydration (when anchor comment node is not projected) #50543
Description
Which @angular/* package(s) are the source of the bug?
platform-browser
Is this a regression?
No
Description
when hydration is enabled and a component uses ngTemplateOutlet to render a template passed from a parent e.g. via ContentChild then its getting rendered twice for the duration of the hydration.
So it looks the like this if 'abc' is the template content
received from server
abc
during hydration
abc abc <-- this looks sometimes a bit ugly
after hydration
abc
So is it possible that the passed template gets just once rendered during the hydration process?
The relevant code parts for reprodruction:
<app-shell>
<ng-template #customTemplate>
<p>template</p>
</ng-template>
</app-shell>
@Component({
selector: 'app-shell',
template: `<ng-container
*ngIf="customTemplate"
[ngTemplateOutlet]="customTemplate"
></ng-container>`,
styles: [],
})
export class ShellComponent {
@ContentChild('customTemplate', { static: true })
customTemplate: TemplateRef<any> | null = null;
}
Please provide a link to a minimal reproduction of the bug
https://github.com/michael-hein/hydration-ng-template
Please provide the exception or error you saw
N/A
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 16.0.4
Node: 18.16.0
Package Manager: npm 8.19.3
OS: win32 x64
Angular: 16.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.4
@angular-devkit/build-angular 16.0.4
@angular-devkit/core 16.0.4
@angular-devkit/schematics 16.0.4
@nguniversal/builders 16.0.2
@nguniversal/express-engine 16.0.2
@schematics/angular 16.0.4
rxjs 7.8.1
typescript 4.9.5
Anything else?
No response