fix(core): components marked for traversal resets reactive context (angular#61663)

kristilw · pkozlowski-opensource · commit 3aa933acb796 · 2025-06-05T14:49:01.000+02:00
when marked for traversal the reactive context has to be set to null to avoid inheriting the reactive context of the parent component PR Closes angular#61662 PR Close angular#61663
diff --git a/packages/core/src/render3/instructions/change_detection.ts b/packages/core/src/render3/instructions/change_detection.ts
@@ -13,6 +13,7 @@ import {
   consumerPollProducersForChange,
   getActiveConsumer,
   ReactiveNode,
+  setActiveConsumer,
 } from '../../../primitives/signals';
 
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
@@ -207,7 +208,10 @@ export function refreshView<T>(
     } else if (getActiveConsumer() === null) {
       // If the current view should not have a reactive consumer but we don't have an active consumer,
       // we still need to create a temporary consumer to track any signal reads in this template.
-      // This is a rare case that can happen with `viewContainerRef.createEmbeddedView(...).detectChanges()`.
+      // This is a rare case that can happen with
+      // - `viewContainerRef.createEmbeddedView(...).detectChanges()`.
+      // - `viewContainerRef.createEmbeddedView(...)` without any other dirty marking on the parent,
+      //   flagging the parent component for traversal but not triggering a full `refreshView`.
       // This temporary consumer marks the first parent that _should_ have a consumer for refresh.
       // Once that refresh happens, the signals will be tracked in the parent consumer and we can destroy
       // the temporary one.
@@ -490,16 +494,22 @@ function detectChangesInView(lView: LView, mode: ChangeDetectionMode) {
   if (shouldRefreshView) {
     refreshView(tView, lView, tView.template, lView[CONTEXT]);
   } else if (flags & LViewFlags.HasChildViewsToRefresh) {
-    if (!isInCheckNoChangesPass) {
-      runEffectsInView(lView);
-    }
-    detectChangesInEmbeddedViews(lView, ChangeDetectionMode.Targeted);
-    const components = tView.components;
-    if (components !== null) {
-      detectChangesInChildComponents(lView, components, ChangeDetectionMode.Targeted);
-    }
-    if (!isInCheckNoChangesPass) {
-      addAfterRenderSequencesForView(lView);
+    // Set active consumer to null to avoid inheriting an improper reactive context
+    const prevConsumer = setActiveConsumer(null);
+    try {
+      if (!isInCheckNoChangesPass) {
+        runEffectsInView(lView);
+      }
+      detectChangesInEmbeddedViews(lView, ChangeDetectionMode.Targeted);
+      const components = tView.components;
+      if (components !== null) {
+        detectChangesInChildComponents(lView, components, ChangeDetectionMode.Targeted);
+      }
+      if (!isInCheckNoChangesPass) {
+        addAfterRenderSequencesForView(lView);
+      }
+    } finally {
+      setActiveConsumer(prevConsumer);
     }
   }
 }
diff --git a/packages/core/test/acceptance/change_detection_spec.ts b/packages/core/test/acceptance/change_detection_spec.ts
@@ -222,6 +222,47 @@ describe('change detection', () => {
 
       expect(counter).toBe(3);
     });
+
+    it('updating signal inside an EmbeddedView in a child component with OnPush inside a parent component with Default CD', async () => {
+      const data = signal('initial');
+
+      @Component({
+        selector: 'child',
+        template: '<ng-container *viewManipulation>{{data()}}</ng-container>',
+        imports: [ViewManipulation],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+      })
+      class ChildComponent {
+        data = data;
+      }
+
+      @Component({
+        template: '<child/>',
+        changeDetection: ChangeDetectionStrategy.Default,
+        imports: [ChildComponent],
+      })
+      class ParentComponent {}
+
+      TestBed.configureTestingModule({
+        providers: [{provide: ComponentFixtureAutoDetect, useValue: true}],
+      });
+
+      const fixture = TestBed.createComponent(ParentComponent);
+      await fixture.whenStable();
+      expect(fixture.nativeElement.innerText).toBe('');
+
+      fixture.debugElement
+        .queryAllNodes(By.directive(ViewManipulation))[0]
+        .injector.get(ViewManipulation)
+        .insertIntoVcRef();
+      await fixture.whenStable();
+      expect(fixture.nativeElement.innerText).toBe(data());
+
+      data.set('new');
+      expect(fixture.isStable()).toBe(false);
+      await fixture.whenStable();
+      expect(fixture.nativeElement.innerText).toBe(data());
+    });
   });
 
   describe('markForCheck', () => {
