Angular: Support @boundary / @error error boundaries (#20015)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: fisker Cheung <lionkay@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

tests/format/angular/control-flow/__snapshots__/format.test.js.snap

@@ -52,6 +52,258 @@ parsers: ["angular"]
 ================================================================================
 `;
 
+exports[`boundary.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+@boundary {
+  <app-risky-component />
+} @error {
+  <p>Something went wrong!</p>
+}
+
+@boundary {
+  <app-risky-component />
+} @error {
+  <p>Error occurred: {{ $error.message }}</p>
+}
+
+@boundary {
+  <app-flaky-component />
+} @error {
+  <p>Loading failed.</p>
+  <button (click)="$reset()">Try again</button>
+}
+
+@boundary {
+  <app-risky-component />
+} @error {
+  <app-error-fallback [error]="err" />
+}
+
+@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 />
+}
+
+@boundary {
+  <app-chart-dashboard />
+} @error (let err; reset = $reset; when isRenderError(err)) {
+  <p>Network issue. Check your connection.</p>
+  <button (click)="reset()">Retry</button>
+} @error {
+  <p>An unexpected error occurred: {{ $error.message }}</p>
+}
+
+@boundary {
+  <complex-chart [data]="data"/>
+} @error (let err = $error; let r = $reset) {
+  <p>Failed to load chart: {{err.message}}</p>
+  <button (click)="r()">Retry</button>
+}
+
+@boundary {
+  Outer Main
+  @boundary {
+    Inner Main
+  } @error {
+    Inner Fallback
+  }
+} @error {
+  Outer Fallback
+}
+
+@defer {
+  @boundary {
+    <app-c1/>
+  } @error {
+    <span>Render error</span>
+  }
+} @error {
+  <span>Load error</span>
+}
+
+=====================================output=====================================
+@boundary {
+  <app-risky-component />
+} @error {
+  <p>Something went wrong!</p>
+}
+
+@boundary {
+  <app-risky-component />
+} @error {
+  <p>Error occurred: {{ $error.message }}</p>
+}
+
+@boundary {
+  <app-flaky-component />
+} @error {
+  <p>Loading failed.</p>
+  <button (click)="$reset()">Try again</button>
+}
+
+@boundary {
+  <app-risky-component />
+} @error {
+  <app-error-fallback [error]="err" />
+}
+
+@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 />
+}
+
+@boundary {
+  <app-chart-dashboard />
+} @error (let err; reset = $reset; when isRenderError(err)) {
+  <p>Network issue. Check your connection.</p>
+  <button (click)="reset()">Retry</button>
+} @error {
+  <p>An unexpected error occurred: {{ $error.message }}</p>
+}
+
+@boundary {
+  <complex-chart [data]="data" />
+} @error (let err = $error; let r = $reset) {
+  <p>Failed to load chart: {{ err.message }}</p>
+  <button (click)="r()">Retry</button>
+}
+
+@boundary {
+  Outer Main
+  @boundary {
+    Inner Main
+  } @error {
+    Inner Fallback
+  }
+} @error {
+  Outer Fallback
+}
+
+@defer {
+  @boundary {
+    <app-c1 />
+  } @error {
+    <span>Render error</span>
+  }
+} @error {
+  <span>Load error</span>
+}
+
+================================================================================
+`;
+
+exports[`boundary-error-parameters.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================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 />
+}
+
+@boundary {
+  <app-chart-dashboard />
+} @error (let
+err; reset
+=
+$reset; when
+isRenderError(err)) {
+  <p>Network issue. Check your connection.</p>
+  <button (click)="reset()">Retry</button>
+} @error {
+  <p>An unexpected error occurred: {{$error.message}}</p>
+}
+
+@boundary {
+  <complex-chart [data]="data"/>
+} @error (let err=$error; let r=$reset) {
+  <p>Failed to load chart: {{err.message}}</p>
+  <button (click)="r()">Retry</button>
+}
+
+@boundary {
+  Main
+} @error (let err; when err.message === '404') {
+  Not Found
+}
+
+@boundary {
+  Main
+} @error (err = $error, retry
+=
+$reset) {
+  <button (click)="retry()">Retry</button>
+}
+
+=====================================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 />
+}
+
+@boundary {
+  <app-chart-dashboard />
+} @error (let
+err; reset
+=
+$reset; when
+isRenderError(err)) {
+  <p>Network issue. Check your connection.</p>
+  <button (click)="reset()">Retry</button>
+} @error {
+  <p>An unexpected error occurred: {{ $error.message }}</p>
+}
+
+@boundary {
+  <complex-chart [data]="data" />
+} @error (let err=$error; let r=$reset) {
+  <p>Failed to load chart: {{ err.message }}</p>
+  <button (click)="r()">Retry</button>
+}
+
+@boundary {
+  Main
+} @error (let err; when err.message === '404') {
+  Not Found
+}
+
+@boundary {
+  Main
+} @error (err = $error, retry
+=
+$reset) {
+  <button (click)="retry()">Retry</button>
+}
+
+================================================================================
+`;
+
 exports[`chid.html format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]

tests/format/angular/control-flow/boundary-error-parameters.html

@@ -0,0 +1,45 @@
+@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 />
+}
+
+@boundary {
+  <app-chart-dashboard />
+} @error (let
+err; reset
+=
+$reset; when
+isRenderError(err)) {
+  <p>Network issue. Check your connection.</p>
+  <button (click)="reset()">Retry</button>
+} @error {
+  <p>An unexpected error occurred: {{$error.message}}</p>
+}
+
+@boundary {
+  <complex-chart [data]="data"/>
+} @error (let err=$error; let r=$reset) {
+  <p>Failed to load chart: {{err.message}}</p>
+  <button (click)="r()">Retry</button>
+}
+
+@boundary {
+  Main
+} @error (let err; when err.message === '404') {
+  Not Found
+}
+
+@boundary {
+  Main
+} @error (err = $error, retry
+=
+$reset) {
+  <button (click)="retry()">Retry</button>
+}

tests/format/angular/control-flow/boundary.html

@@ -0,0 +1,70 @@
+@boundary {
+  <app-risky-component />
+} @error {
+  <p>Something went wrong!</p>
+}
+
+@boundary {
+  <app-risky-component />
+} @error {
+  <p>Error occurred: {{ $error.message }}</p>
+}
+
+@boundary {
+  <app-flaky-component />
+} @error {
+  <p>Loading failed.</p>
+  <button (click)="$reset()">Try again</button>
+}
+
+@boundary {
+  <app-risky-component />
+} @error {
+  <app-error-fallback [error]="err" />
+}
+
+@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 />
+}
+
+@boundary {
+  <app-chart-dashboard />
+} @error (let err; reset = $reset; when isRenderError(err)) {
+  <p>Network issue. Check your connection.</p>
+  <button (click)="reset()">Retry</button>
+} @error {
+  <p>An unexpected error occurred: {{ $error.message }}</p>
+}
+
+@boundary {
+  <complex-chart [data]="data"/>
+} @error (let err = $error; let r = $reset) {
+  <p>Failed to load chart: {{err.message}}</p>
+  <button (click)="r()">Retry</button>
+}
+
+@boundary {
+  Outer Main
+  @boundary {
+    Inner Main
+  } @error {
+    Inner Fallback
+  }
+} @error {
+  Outer Fallback
+}
+
+@defer {
+  @boundary {
+    <app-c1/>
+  } @error {
+    <span>Render error</span>
+  }
+} @error {
+  <span>Load error</span>
+}