fix(core): ViewProviders are injected into projected content if new flow-syntax is used

Prevent viewProviders from leaking into projected content when using new control flow syntax

Fixed angular#63312

Author: aparzi

packages/core/src/render3/di.ts

@@ -567,9 +567,13 @@ function lookupTokenUsingNodeInjector<T>(
       if (parentLocation === NO_PARENT_INJECTOR || !shouldSearchParent(flags, false)) {
         injectorIndex = -1;
       } else {
+        const viewOffset = parentLocation >> RelativeInjectorLocationFlags.ViewOffsetShift;
         previousTView = lView[TVIEW];
+        for (let i = 0; i < viewOffset; i++) {
+          previousTView = lView[TVIEW];
+          lView = lView[DECLARATION_VIEW]!;
+        }
         injectorIndex = getParentInjectorIndex(parentLocation);
-        lView = getParentInjectorView(parentLocation, lView);
       }
     }
 
@@ -609,9 +613,13 @@ function lookupTokenUsingNodeInjector<T>(
       ) {
         // The def wasn't found anywhere on this node, so it was a false positive.
         // Traverse up the tree and continue searching.
-        previousTView = tView;
+        const viewOffset = parentLocation >> RelativeInjectorLocationFlags.ViewOffsetShift;
+        previousTView = lView[TVIEW];
+        for (let i = 0; i < viewOffset; i++) {
+          previousTView = lView[TVIEW];
+          lView = lView[DECLARATION_VIEW]!;
+        }
         injectorIndex = getParentInjectorIndex(parentLocation);
-        lView = getParentInjectorView(parentLocation, lView);
       } else {
         // If we should not search parent OR If the ancestor bloom filter value does not have the
         // bit corresponding to the directive we can give up on traversing up to find the specific
@@ -652,7 +660,9 @@ function searchTokensOnInjector<T>(
         // - AND the parent TNode is an Element.
         // This means that we just came from the Component's View and therefore are allowed to see
         // into the ViewProviders.
-        previousTView != currentTView && (tNode.type & TNodeType.AnyRNode) !== 0;
+        previousTView != currentTView &&
+        (tNode.type & TNodeType.Element) !== 0 &&
+        previousTView.type === TViewType.Component;
 
   // This special case happens when there is a @host on the inject and when we are searching
   // on the host element node.

packages/core/test/acceptance/di_spec.ts

@@ -7193,4 +7193,140 @@ describe('di', () => {
       );
     });
   });
+
+  describe('control flow + viewProviders', () => {
+    it('should not allow projected content to see viewProviders when wrapped in @if', () => {
+      const token = new InjectionToken<string>('token');
+
+      @Component({
+        selector: 'app-child-component',
+        standalone: true,
+        template: '{{value}}',
+      })
+      class ChildComponent {
+        value = inject(token);
+      }
+
+      @Component({
+        selector: 'app-provider-component',
+        standalone: true,
+        imports: [],
+        providers: [{provide: token, useValue: 'provider'}],
+        viewProviders: [{provide: token, useValue: 'viewProvider'}],
+        template: `
+          <div>
+            Projected<br />
+            <ng-content></ng-content>
+          </div>
+        `,
+      })
+      class ProviderComponent {}
+
+      @Component({
+        selector: 'app-test-new-flow',
+        standalone: true,
+        imports: [ProviderComponent, ChildComponent],
+        template: `
+          <app-provider-component>
+            @if (flag) {
+              <app-child-component />
+            }
+          </app-provider-component>
+        `,
+      })
+      class TestNewFlowComponent {
+        flag = true;
+      }
+
+      @Component({
+        selector: 'app-test-old-flow',
+        standalone: true,
+        imports: [ProviderComponent, ChildComponent, CommonModule],
+        template: `
+          <app-provider-component>
+            <app-child-component *ngIf="flag" />
+          </app-provider-component>
+        `,
+      })
+      class TestOldFlowComponent {
+        flag = true;
+      }
+
+      // Test old syntax it's ok
+      const oldFixture = TestBed.createComponent(TestOldFlowComponent);
+      oldFixture.detectChanges();
+      expect(oldFixture.nativeElement.textContent).toContain('provider');
+      expect(oldFixture.nativeElement.textContent).not.toContain('viewProvider');
+
+      // Test that the new syntax behaves like the old one
+      const newFixture = TestBed.createComponent(TestNewFlowComponent);
+      newFixture.detectChanges();
+      expect(newFixture.nativeElement.textContent).toContain('provider');
+      expect(newFixture.nativeElement.textContent).not.toContain('viewProvider');
+    });
+
+    it('should allow a directive in an @if block to inject a token from viewProviders', () => {
+      const TOKEN = new InjectionToken<string>('token');
+
+      @Directive({
+        selector: '[testDir]',
+        standalone: true,
+      })
+      class TestDir {
+        value = inject(TOKEN);
+      }
+
+      @Component({
+        selector: 'test-comp',
+        standalone: true,
+        imports: [TestDir],
+        viewProviders: [{provide: TOKEN, useValue: 'view-value'}],
+        template: `
+          @if (true) {
+            <div testDir></div>
+          }
+        `,
+      })
+      class TestComp {
+        @ViewChild(TestDir) testDir!: TestDir;
+      }
+
+      const fixture = TestBed.createComponent(TestComp);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.testDir.value).toBe('view-value');
+    });
+
+    it('should allow a directive in nested @if blocks to inject a token from viewProviders', () => {
+      const TOKEN = new InjectionToken<string>('token');
+
+      @Directive({
+        selector: '[testDir]',
+        standalone: true,
+      })
+      class TestDir {
+        value = inject(TOKEN);
+      }
+
+      @Component({
+        selector: 'test-comp',
+        standalone: true,
+        imports: [TestDir],
+        viewProviders: [{provide: TOKEN, useValue: 'view-value'}],
+        template: `
+          @if (true) {
+            <div testDir></div>
+          }
+        `,
+      })
+      class TestComp {
+        @ViewChild(TestDir) testDir!: TestDir;
+      }
+
+      const fixture = TestBed.createComponent(TestComp);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.testDir.value).toBe('view-value');
+    });
+  });
 });