diff --git a/packages/core/src/hydration/annotate.ts b/packages/core/src/hydration/annotate.ts index 5d390e304a4..ddd8f56ec6e 100644 --- a/packages/core/src/hydration/annotate.ts +++ b/packages/core/src/hydration/annotate.ts @@ -182,6 +182,14 @@ function annotateLContainerForHydration(lContainer: LContainer, context: Hydrati // Serialize the root component itself. const componentLViewNghIndex = annotateComponentLViewForHydration(componentLView, context); + if (componentLViewNghIndex === null) { + // Component was not serialized (for example, if hydration was skipped by adding + // the `ngSkipHydration` attribute or this component uses i18n blocks in the template, + // but `withI18nSupport()` was not added), avoid annotating host element with the `ngh` + // attribute. + return; + } + const hostElement = unwrapRNode(componentLView[HOST]!) as HTMLElement; // Serialize all views within this view container. diff --git a/packages/platform-server/test/hydration_spec.ts b/packages/platform-server/test/hydration_spec.ts index b1dc17a383e..2582be4b200 100644 --- a/packages/platform-server/test/hydration_spec.ts +++ b/packages/platform-server/test/hydration_spec.ts @@ -1964,6 +1964,29 @@ describe('platform-server hydration integration', () => { clearTranslations(); }); + it('should append skip hydration flag if component uses i18n blocks and no `withI18nSupport()` call present', async () => { + @Component({ + standalone: true, + selector: 'app', + template: '