Conditionals and content projection

[pkozlowski-opensource]

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

core

Is this a regression?

No

Description

There is a surprising interaction between our static (creation time) content projection system and the new control flow (although this is not specific to the new control flow - the same can be observed with ngIf).

To illustrate the surprising scenario let's consider a component with content projection with a selector (<ng-content select="some-content">) and content to project wrapped in the control flow @if statement with the else branch:

<with-content>
      @if(false) {          
        <some-content />
      } @else {
        I'm not the content queried for, don't project me! 
      }
</with-content>

https://stackblitz.com/edit/stackblitz-starters-57dynz?file=src%2Fmain.ts

As surprising as it may be, the I'm not the content queried for, don't project me! text node will be taken as content to project (!). This is consistent with the existing implementation which will project the whole @if container and container capturing the some-content as a tag name of a root node.

While we can't fix all issues with the content projection, we could remedy this one by

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-57dynz?file=src%2Fmain.ts

Please provide the exception or error you saw

No response

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

No response

Anything else?

No response

[csisy-bt4w]

I'd like to add to this, I'm not sure however, if related or not. Some selectors do not work if the content itself is generated (e.g. with @if or @for). Consider the following example:

@Component({
  selector: 'app-container',
  standalone: true,
  template: `
    <div>Contains:</div>
    <ng-content select="[routerLink]"/>
  `
})
export class AppContainerComponent {}

By using this component, an element with a routerLink directive is only projected if it is given as a content directly:

<app-container>
  <button [routerLink]="'/1'">/1</button>
</app-container>

However, if generated dynamically, then nothing is projected, nothing is shown:

<app-container>
  @if (true) {
    <button [routerLink]="'/2'">/2</button>
  } @else {
    <button [routerLink]="'/3'">/3</button>
  }
</app-container>

<app-container>
  @for (link of links; track link) {
    <button [routerLink]="link">{{ link }}</button>
  }
</app-container>

Please note: if I use a component attribute name as a selector (e.g. [app-custom]), then it works. I think this is because in this case, the html element itself contains an attribute with the same name.

Edit:
Also, this is a regression, we updated our project to the latest (17.3.0) version, and it was working in version 17.1.0

Edit 2:
This seems to be a bug related to the new template pipeline. In the tsconfig if we added "useTemplatePipeline": false then everything works as expected.

[pkozlowski-opensource]

@csisy-btw could you please open a separate issue for your use-case, ideally with a minimal reproduction scenario in a stackblitz? Otherwise we might miss this one. Thnx!

[pkozlowski-opensource]

PR: #54879

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}