Skip to content

ViewProviders are injected into projected content if new flow-syntax is used #63312

@tomsontom

Description

@tomsontom

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

Yes

Description

if one uses the new control-flow syntax services provided in viewProviders are injected into the projected content instead of the service set in the providers.

This only happens if the new control-flow syntax (eg @if) is used. Using the old *ngIfsyntax does not leak the viewProvider into the projected content.

if you run the sample in the provided github repo you'll get an output like this:

Image

The basic source is like this:

new-flow.html:

<h1>New FLOW</h1>
<app-provider-component>
  @if(flag) {
  <app-child-component>Child in if</app-child-component>
  }
  <app-child-component>Child direct</app-child-component>
</app-provider-component>

provider-component.html:

<div>
  Projected<br />
  <ng-content></ng-content>
</div>

provider-component.html

@Component({
  selector: 'app-provider-component',
  imports: [],
  templateUrl: './provider-component.html',
  styleUrl: './provider-component.css',
  providers: [{ provide: BaseSampleService, useClass: ProviderSampleService }],
  viewProviders: [
    {
      provide: BaseSampleService,
      useClass: ViewProviderSampleService,
    },
  ],
  standalone: true,
})
export class ProviderComponent {}

Please provide a link to a minimal reproduction of the bug

https://github.com/BestSolution-at/angluar-injection-bug

Please provide the exception or error you saw

Run the sample project provided and notice that the output lines "Service: ..." is different between in the elements "New flow" section, whereas it is equal if you use the old `*ngIf` version.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 20.2.0
Node: 22.17.1
Package Manager: npm 10.9.2
OS: darwin arm64
    

Angular: 20.2.1
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2002.0
@angular-devkit/core         20.2.0
@angular-devkit/schematics   20.2.0
@angular/build               20.2.0
@angular/cli                 20.2.0
@schematics/angular          20.2.0
rxjs                         7.8.2
typescript                   5.9.2
zone.js                      0.15.1

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtimecore: control flowIssues related to the built-in control flow (@if, @for, @switch)

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions