Multiple instances of the same @defered component are instantiated in a random order with esbuild (but not webpack) about angular

[AndrewKushnir]

@simeyla the @defer feature by design can not guarantee the order in which blocks would be loaded and executed, so relying on the order can lead to breakages and the behavior that you've described.

There are a couple options you may consider:

1. Wrap a larger section into a defer block and have multiple components there:

  @defer() {
    <app-defered />
    <app-defered />
    ...
  }

2. Add extra logic into the app code to ensure the order:

@if (loadedCount === 0) {
  @defer() {
    <app-defered />
  }
}

// ... somewhere in another part of the template ...
@if (loadedCount === 1) {
  @defer() {
    <app-defered />
  }
}

The loadedCount could be increased once a new instance of a component is created.

I'll close this ticket for now, since this behavior is expected - there is no guarantee around an exact order in which @defer blocks are loaded and invoked.