Angular: Support `@boundary` / `@error` error boundaries by Yahiro025 · Pull Request #20015 · prettier/prettier

Yahiro025 · 2026-09-10T03:33:47Z

Description

Fixes #20014

Adds parsing and printing for Angular 22.2 error boundary blocks (@boundary / @error), following the same printer pairing rules as existing control-flow blocks (@if/@else, @for/@empty, @defer/@error).

Also formats nested boundaries, multiple @error blocks, let / $reset aliases, empty blocks, and @defer + @boundary together.

Uses [email protected], which includes @boundary natively (per @fisker).

Checklist

I’ve added tests to confirm my change works.
(If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory).
(If the change is user-facing) I’ve added my changes to changelog_unreleased/*/XXXX.md file following changelog_unreleased/TEMPLATE.md.
I’ve read the contributing guidelines.
I did not use AI to generate this PR.
(If the above is not checked) I have reviewed the AI-generated content before submitting.

Drafted with Cursor (Grok); reviewed before opening.

Recognize Angular 22.2 `@boundary` blocks and print them with a following `@error` chain, matching existing `@defer` / `@if` / `@for` control-flow formatting. Co-authored-by: Bennett Payoyo <[email protected]>

Co-authored-by: Bennett Payoyo <[email protected]>

netlify · 2026-09-10T03:35:02Z

✅ Deploy Preview for prettier ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`c2bb8c6`
🔍 Latest deploy log	https://app.netlify.com/projects/prettier/deploys/6aa60f0311a40100088b4f53
😎 Deploy Preview	https://deploy-preview-20015--prettier.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

fisker · 2026-09-10T13:10:09Z

[email protected] has been released https://github.com/prettier/angular-html-parser/releases/tag/v10.12.0 .

pkg-pr-new · 2026-09-10T13:27:19Z

Open in StackBlitz

yarn add https://pkg.pr.new/@prettier/[email protected]

yarn add https://pkg.pr.new/@prettier/[email protected]

yarn add https://pkg.pr.new/@prettier/[email protected]

yarn add https://pkg.pr.new/[email protected]

commit: c2bb8c6

angular-html-parser 10.12.0 tokenizes @boundary, so the temporary SUPPORTED_ANGULAR_BLOCKS mutation is no longer needed. Co-authored-by: Bennett Payoyo <[email protected]>

Yahiro025 · 2026-09-12T03:05:13Z

Thanks @fisker — updated to [email protected] and removed the temporary @boundary shim. Printer pairing + fixtures unchanged.

fisker · 2026-09-12T03:08:23Z

+}
+} @error {
+<span>Load error</span>
+}


How were these tests generated?

Maybe we can adopt examples from https://github.com/angular/angular/pull/70560/changes?

fisker · 2026-09-12T03:11:06Z

Looks like the params not correctly formatted?

Prettier PR #20015
Playground link

--parser angular

Input:

@boundary {
  <app-risky-component />
} @error (let err; retry 

= $reset; when 
isNetworkError(err)) {
  <app-network-error [error]="err" />
  <button (click)="retry()">Retry</button>
} @error {
  <app-generic-error />
}

Output:

@boundary {
  <app-risky-component />
} @error (let err; retry 

= $reset; when 
isNetworkError(err)) {
  <app-network-error [error]="err" />
  <button (click)="retry()">Retry</button>
} @error {
  <app-generic-error />
}

Print let / named / when parameters from the existing structured AST instead of leaving raw whitespace, and replace fixtures with Angular docs examples plus the messy playground case. Co-authored-by: Bennett Payoyo <[email protected]>

Parse named aliases before `when`, split comma-separated bindings, and refresh snapshots for the official docs fixtures plus messy playground input. Co-authored-by: Bennett Payoyo <[email protected]>

Yahiro025 · 2026-09-12T06:12:12Z

Thanks — both notes should be addressed on this branch.

Fixtures. boundary.html now uses the official examples from angular/angular#70560 (adev/.../error-boundaries.md and tools/manual_api_docs/blocks/boundary.md): $error.message, $reset(), when, and the playground pattern with let err; retry = $reset; when isNetworkError(err). Nested @boundary and @defer + @boundary are kept only for pairing. The messy playground case lives in boundary-error-parameters.html.

Params. 10.12.0 already gives structured @error parameters (semicolon-split let / named binding / when). They were only trimmed, so internal line breaks survived. __ng_directive can’t parse retry = $reset or when …, so each parameter is classified like Angular’s r3_boundaries.ts and the expression parts are formatted with __ng_binding.

Your playground input now prints as:

@boundary {
  <app-risky-component />
} @error (let err; retry = $reset; when isNetworkError(err)) {
  <app-network-error [error]="err" />
  <button (click)="retry()">Retry</button>
} @error {
  <app-generic-error />
}

fisker · 2026-09-12T09:21:36Z

@@ -0,0 +1,61 @@
+import { join } from "../../document/index.js";


I don't want to parse the parameters here in this repo.

I saw a parseLetParameters from angular/angular#70463, but our angular-estree-parser currently only uses Parser from @angular/compiler.

@JeanMeche Do you know if there is existing functionality to parse the error parameters?

Would something like angular/angular#70706 satisfy your needs ?

Thanks for the PR, but no.

Currently, we print the parameters via our __ng_directive, and __ng_binding printer.

They are based on angular-estree-parser.

The __ng_directive printer calls import('@angular/compiler').Parser#parseTemplateBindings(), and __ng_binding calls import('@angular/compiler').Parser#parseBinding() then transform the AST to an ESTree-compatible AST.

Actually, we are not really sure if we are doing it right.
The maintainers are not familiar with Angular.
When we first added support for letDeclaration, I used parseTemplateBindings only because they have similar syntax and it already exists.

We can make changes to angular-estree-parser to support these expressions with "r3render", but we still need to produce an ESTree-compatible AST.

Yahiro025 · 2026-09-13T02:45:55Z

Thanks @fisker — clear on the direction.

We'll stop parsing @error parameters inside Prettier. Agreed that formatting should go through angular-estree-parser → ESTree, then the existing __ng_directive / __ng_binding printers (same shape as today's template bindings / bindings), not ad-hoc regex in this repo.

Happy to help on the angular-estree-parser side (and follow whatever @angular/compiler / r3 path you and @JeanMeche settle on). Until that lands, I'll remove the in-repo angular-error-block-parameter parsing approach from this PR so it doesn't fight the intended architecture.

Stop classifying and formatting `@error` parameters in Prettier. Pretty-printing those params should go through angular-estree-parser and the existing `__ng_directive` / `__ng_binding` printers once that parser understands boundary syntax. Keep `@boundary` / `@error` block recognition and pairing. Snapshots now record the honest un-reflowed parameter text. Co-authored-by: Bennett Payoyo <[email protected]>

fisker · 2026-09-15T09:20:37Z

I'm going to leave the error parameters and merge.

Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: fisker Cheung <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> # Conflicts: # scripts/build/transform/index.js

cursoragent and others added 2 commits September 10, 2026 03:25

Angular: Support @boundary / @error error boundaries

4b1bba3

Recognize Angular 22.2 `@boundary` blocks and print them with a following `@error` chain, matching existing `@defer` / `@if` / `@for` control-flow formatting. Co-authored-by: Bennett Payoyo <[email protected]>

Add changelog for Angular @boundary error boundaries

6932346

Co-authored-by: Bennett Payoyo <[email protected]>

github-actions Bot mentioned this pull request Sep 10, 2026

Misc prettier/prettier-regression-testing#731

Open

Bump angular-html-parser to 10.12.0 and drop @boundary shim

e08d8f7

angular-html-parser 10.12.0 tokenizes @boundary, so the temporary SUPPORTED_ANGULAR_BLOCKS mutation is no longer needed. Co-authored-by: Bennett Payoyo <[email protected]>

fisker reviewed Sep 12, 2026

View reviewed changes

fisker and others added 4 commits September 12, 2026 11:13

Update build script

ccdda80

Apply automated changes

e209578

Angular: Format @error boundary parameters

a5d7a59

Print let / named / when parameters from the existing structured AST instead of leaving raw whitespace, and replace fixtures with Angular docs examples plus the messy playground case. Co-authored-by: Bennett Payoyo <[email protected]>

Angular: Align @error param parsing with the compiler

6621eca

Parse named aliases before `when`, split comma-separated bindings, and refresh snapshots for the official docs fixtures plus messy playground input. Co-authored-by: Bennett Payoyo <[email protected]>

fisker reviewed Sep 12, 2026

View reviewed changes

fisker changed the title ~~Angular: Support @boundary / @error error boundaries~~ Angular: Support @boundary / @error error boundaries Sep 15, 2026

fisker merged commit eca3773 into prettier:main Sep 15, 2026
38 checks passed

fisker mentioned this pull request Sep 15, 2026

Release v3.9.7 #20070

Closed

8 of 10 tasks

Navigation Menu

Repository navigation

Angular: Support `@boundary` / `@error` error boundaries - #20015

Angular: Support `@boundary` / `@error` error boundaries#20015
fisker merged 8 commits into
prettier:mainfrom
Yahiro025:cursor/angular-error-boundaries-20014-b5e7

Yahiro025 commented Sep 10, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Sep 10, 2026 •

edited

Loading

Uh oh!

fisker commented Sep 10, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Sep 10, 2026 •

edited

Loading

Uh oh!

Yahiro025 commented Sep 12, 2026

Uh oh!

fisker Sep 12, 2026

Uh oh!

fisker commented Sep 12, 2026

Uh oh!

Yahiro025 commented Sep 12, 2026

Uh oh!

fisker Sep 12, 2026 •

edited

Loading

Uh oh!

JeanMeche Sep 12, 2026

Uh oh!

fisker Sep 12, 2026

Uh oh!

Yahiro025 commented Sep 13, 2026

Uh oh!

fisker commented Sep 15, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -0,0 +1,61 @@
		import { join } from "../../document/index.js";

Conversation

Yahiro025 commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

netlify Bot commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for prettier ready!

Uh oh!

fisker commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Yahiro025 commented Sep 12, 2026

Uh oh!

fisker Sep 12, 2026

Choose a reason for hiding this comment

Uh oh!

fisker commented Sep 12, 2026

Uh oh!

Yahiro025 commented Sep 12, 2026

Uh oh!

fisker Sep 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JeanMeche Sep 12, 2026

Choose a reason for hiding this comment

Uh oh!

fisker Sep 12, 2026

Choose a reason for hiding this comment

Uh oh!

Yahiro025 commented Sep 13, 2026

Uh oh!

fisker commented Sep 15, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Yahiro025 commented Sep 10, 2026 •

edited

Loading

netlify Bot commented Sep 10, 2026 •

edited

Loading

fisker commented Sep 10, 2026 •

edited

Loading

pkg-pr-new Bot commented Sep 10, 2026 •

edited

Loading

fisker Sep 12, 2026 •

edited

Loading