fix(core): handle hydration of root components with injected ViewContainerRef (#50136)

AndrewKushnir · alxhub · commit d68796782ff4 · 2023-05-09T14:43:45.000-07:00
This commit fixes an issue where a root component with an injected ViewContainerRef (for ex. `inject(ViewContainerRef)`) was triggering a certain code path during hydration which didn't handle this case correctly. Resolves #50133. PR Close #50136
diff --git a/packages/core/src/hydration/utils.ts b/packages/core/src/hydration/utils.ts
@@ -11,8 +11,8 @@ import {Injector} from '../di/injector';
 import {ViewRef} from '../linker/view_ref';
 import {getDocument} from '../render3/interfaces/document';
 import {RElement, RNode} from '../render3/interfaces/renderer_dom';
-import {isRootView} from '../render3/interfaces/type_checks';
-import {HEADER_OFFSET, LView, TVIEW, TViewType} from '../render3/interfaces/view';
+import {isLContainer, isRootView} from '../render3/interfaces/type_checks';
+import {HEADER_OFFSET, HOST, LView, TVIEW, TViewType} from '../render3/interfaces/view';
 import {makeStateKey, TransferState} from '../transfer_state';
 import {assertDefined} from '../util/assert';
 
@@ -142,6 +142,13 @@ export function getComponentLViewForHydration(viewRef: ViewRef): LView|null {
   if (isRootView(lView)) {
     lView = lView[HEADER_OFFSET];
   }
+
+  // If a `ViewContainerRef` was injected in a component class, this resulted
+  // in an LContainer creation at that location. In this case, the component
+  // LView is in the LContainer's `HOST` slot.
+  if (isLContainer(lView)) {
+    lView = lView[HOST];
+  }
   return lView;
 }
 
diff --git a/packages/platform-server/test/hydration_spec.ts b/packages/platform-server/test/hydration_spec.ts
@@ -1523,6 +1523,36 @@ describe('platform-server integration', () => {
                verifyAllNodesClaimedForHydration(clientRootNode, exceptions);
                verifyClientAndSSRContentsMatch(ssrContents, clientRootNode);
              });
+
+          it('should allow injecting ViewContainerRef in the root component', async () => {
+            @Component({
+              standalone: true,
+              selector: 'app',
+              template: `Hello World!`,
+            })
+            class SimpleComponent {
+              private vcRef = inject(ViewContainerRef);
+            }
+
+            const html = await ssr(SimpleComponent);
+            const ssrContents = getAppContents(html);
+
+            expect(ssrContents).toContain(`<app ${NGH_ATTR_NAME}`);
+
+            resetTViewsFor(SimpleComponent);
+
+            const appRef = await hydrate(html, SimpleComponent);
+            const compRef = getComponentRef<SimpleComponent>(appRef);
+            appRef.tick();
+
+            const clientRootNode = compRef.location.nativeElement;
+            verifyAllNodesClaimedForHydration(clientRootNode);
+
+            // Replace the trailing comment node (added as a result of the
+            // `ViewContainerRef` injection) before comparing contents.
+            const _ssrContents = ssrContents.replace(/<\/app><!--container-->/, '</app>');
+            verifyClientAndSSRContentsMatch(_ssrContents, clientRootNode);
+          });
         });
 
         describe('<ng-template>', () => {
