Introduces support for retrying failed @defer block dependency loads via a new @error (retry N) parameter. This feature allows applications to automatically recover from transient network failures or intermittent issues by re-attempting the chunk download up to N times. Each retry attempt automatically applies cache-busting to bypass browser caching of failed dynamic imports.

A new provideDeferBlockRetryHandler public API enables customization of the retry mechanism. This hook empowers advanced use cases such as exponential backoff.

Compiler changes wrap dynamic imports in "thunks," allowing the DeferBlockRetryHandler to access the original import function for re-invocation and URL inspection.

Closes #52800

Other information

The proposed syntax

 @defer (on idle) {
   <app-large-flaky />
 } @loading (minimum 200ms) {
    <p>Loading… </p>
 } @error (retry 3) {
    <p>All retries exhausted </p>
 }

Another alternative could be

 @defer (on idle) {
   <app-large-flaky />
 } @loading (minimum 200ms) {
    <p>Loading… </p>
 } @error ({retry:3 , otherParamsHere... }) {
    <p>All retries exhausted </p>
 }

However, considering we can customize with a provider, it might not be worthwhile atm.

Customizing retry behavior

I was also inspired by Vue, which has a similar API, defineAsyncComponent.

import {provideDeferBlockRetryHandler} from '@angular/core';

bootstrapApplication(App, {
  providers: [
    provideDeferBlockRetryHandler(async (load, ctx) => {
      if (ctx.attempt === 0) {
        return load();
      }
      // Exponential backoff before each retry.
      await new Promise((resolve) => setTimeout(resolve, 2 ** ctx.attempt * 100));
      // `ctx.retry()` re-issues the chunk download with cache-busting applied,
      // so you don't have to parse import URLs yourself.
      return ctx.retry();
    }),
  ],
});

Repository as a Proof of Concept : https://github.com/SkyZeroZx/defer-retry-poc