fix(core): handle missing serialized container hydration data

splincode · atscott · commit 77f1ca08e4aa · 2026-04-07T11:22:03.000-07:00
Simplify the hydration regression test by removing conditional early-return branches and relying on direct Jasmine expectations while keeping strict typing and OnPush configuration.
diff --git a/packages/core/src/linker/view_container_ref.ts b/packages/core/src/linker/view_container_ref.ts
@@ -773,16 +773,23 @@ function populateDehydratedViewsInLContainerImpl(
   const currentRNode: RNode | null = getSegmentHead(hydrationInfo, noOffsetIndex);
 
   const serializedViews = hydrationInfo.data[CONTAINERS]?.[noOffsetIndex];
-  ngDevMode &&
-    assertDefined(
-      serializedViews,
-      'Unexpected state: no hydration info available for a given TNode, ' +
-        'which represents a view container.',
-    );
+  if (serializedViews === undefined) {
+    ngDevMode &&
+      console.warn(
+        'Unexpected state: no hydration info available for a given TNode, ' +
+          'which represents a view container.',
+      );
+
+    // This ViewContainerRef was created for an element through a query
+    // (for example `viewChild(..., {read: ViewContainerRef})`) and there
+    // is no corresponding serialized container data in hydration metadata.
+    // Fall back to creation mode and insert an anchor on demand.
+    return false;
+  }
 
   const [commentNode, dehydratedViews] = locateDehydratedViewsInContainer(
     currentRNode!,
-    serializedViews!,
+    serializedViews,
   );
 
   if (ngDevMode) {
diff --git a/packages/core/test/acceptance/query_spec.ts b/packages/core/test/acceptance/query_spec.ts
@@ -30,6 +30,19 @@ import {
 } from '../../src/core';
 import {TestBed} from '../../testing';
 import {By} from '@angular/platform-browser';
+import {
+  createContainerRef,
+  enableLocateOrCreateContainerRefImpl,
+} from '../../src/linker/view_container_ref';
+import {getLContext} from '../../src/render3/context_discovery';
+import {DehydratedView} from '../../src/hydration/interfaces';
+import {
+  TElementContainerNode,
+  TElementNode,
+  TContainerNode,
+  TNodeType,
+} from '../../src/render3/interfaces/node';
+import {HYDRATION, TVIEW} from '../../src/render3/interfaces/view';
 
 describe('query logic', () => {
   beforeEach(() => {
@@ -1762,6 +1775,48 @@ describe('query logic', () => {
       expect(qList.first).toBeInstanceOf(ViewContainerRef);
     });
 
+    it('should not throw when hydration metadata has no serialized container data', () => {
+      @Component({
+        template: `<div #foo></div>`,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+      })
+      class TestCmp {}
+
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
+
+      const element = fixture.nativeElement.querySelector('div')!;
+      const context = getLContext(element)!;
+      const hostLView = context.lView!;
+      const candidateTNode = hostLView[TVIEW].data[context.nodeIndex] as unknown;
+
+      expect(candidateTNode).toBeDefined();
+      expect(!!candidateTNode && typeof candidateTNode === 'object' && 'type' in candidateTNode)
+        .withContext('Expected a TNode with a type field.')
+        .toBeTrue();
+
+      const hostTNode = candidateTNode as TElementNode | TContainerNode | TElementContainerNode;
+      expect(!!(hostTNode.type & (TNodeType.AnyContainer | TNodeType.AnyRNode)))
+        .withContext('Expected a host TNode that can create a ViewContainerRef.')
+        .toBeTrue();
+
+      hostLView[HYDRATION] = {data: {}, firstChild: null} as DehydratedView;
+      enableLocateOrCreateContainerRefImpl();
+
+      const warnSpy = spyOn(console, 'warn');
+
+      expect(() => createContainerRef(hostTNode, hostLView)).not.toThrow();
+
+      const warningMessages = warnSpy.calls
+        .allArgs()
+        .map(([message]) => String(message))
+        .join('\n');
+
+      expect(warningMessages).toContain(
+        'Unexpected state: no hydration info available for a given TNode, which represents a view container.',
+      );
+    });
+
     it('should read ElementRef with a native element pointing to comment DOM node from ng-template', () => {
       @Component({
         template: `<ng-template #foo></ng-template>`,
