Skip to content

fix(compiler-cli): mention ngProjectAs in content projection control flow error#68652

Open
NoeliaBentancor wants to merge 2 commits into
angular:mainfrom
NoeliaBentancor:fix/content-projection-error-message-ngProjectAs
Open

fix(compiler-cli): mention ngProjectAs in content projection control flow error#68652
NoeliaBentancor wants to merge 2 commits into
angular:mainfrom
NoeliaBentancor:fix/content-projection-error-message-ngProjectAs

Conversation

@NoeliaBentancor
Copy link
Copy Markdown

Fixes #59398

PR Checklist

PR Type

  • Bugfix

What is the current behavior?

The diagnostic error NG8011 (controlFlowPreventingContentProjection) suggests wrapping content in an <ng-container/> but does not mention ngProjectAs, which is the key attribute needed to make the workaround actually work for named slots.

Users following the existing suggestion have no way to know they need ngProjectAs="[selector]" to target a specific slot, leading to confusion (as reported in the issue).

Additionally, the message does not clarify when to use the wrapping approach vs. splitting into multiple blocks, which are solutions for different scenarios (single-slot vs. multi-slot targeting).

What is the new behavior?

Option 1 of the diagnostic now explicitly shows <ng-container ngProjectAs="[selector]"> with the actual slot selector interpolated, and explains this is the right approach when all nodes target the same slot.

Option 2 now clarifies it is needed when nodes target different slots.

Example

Before:

1. Wrap the content of the @if block in an <ng-container/> that matches the "[foo]" selector.
2. Split the content of the @if block across multiple @if blocks such that each one only has a single projectable node at its root.

After:

1. Wrap the content of the @if block in an <ng-container ngProjectAs="[foo]"> to explicitly target the "[foo]" slot. Use this when all nodes in the block should be projected into the same slot.
2. Split the content of the @if block across multiple @if blocks such that each one only has a single projectable node at its root. Use this when nodes in the block target different slots.

…flow error

Update the diagnostic message for NG8011 to explicitly suggest using
`ngProjectAs` on an `<ng-container>` when content inside a control flow
block fails to project into a named slot. Also clarifies when to use
option 1 (ngProjectAs, for single-slot targeting) vs option 2 (splitting
blocks, for multi-slot scenarios).

Fixes angular#59398
@pullapprove pullapprove Bot requested a review from crisbeto May 9, 2026 20:30
@google-cla

This comment was marked as outdated.

@angular-robot angular-robot Bot added the area: compiler Issues related to `ngc`, Angular's template compiler label May 9, 2026
@ngbot ngbot Bot added this to the Backlog milestone May 9, 2026
@NoeliaBentancor NoeliaBentancor force-pushed the fix/content-projection-error-message-ngProjectAs branch from b9a4f34 to 988a7a2 Compare May 10, 2026 21:06
@angular-robot angular-robot Bot added the area: build & ci Related the build and CI infrastructure of the project label May 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: build & ci Related the build and CI infrastructure of the project area: compiler Issues related to `ngc`, Angular's template compiler

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Suggested workaround for content-projection in control flow blocks does not work

1 participant