Template update failure with async pipe, signal inputs, store selectors, and @defer directive

Description


I encountered an intermittent issue where my component's HTML template doesn't update as expected when combining the async pipe, signal inputs, store selectors, and the @defer directive. I’m not sure which part of the setup is causing the problem, or if the issue lies within my code. However, the behavior varies depending on the approach used to bind the data.

In my component, different HTML tags are rendered based on the status, which can be one of three values: loading, updating, or finished. Steps to Reproduce

In the provided StackBlitz reproduction, you can observe three variations of the component:

1. Good Component: Uses a signal to store the observable value emitted from the store status selector. This implementation works correctly.
2. Broken Component: Uses the store status selector with the async pipe in the template, combined with @defer blocks. Occasionally, the component fails to update, particularly when the updating state is triggered.
3. Just Status Component: Uses the store status selector with the async pipe in the template, but only renders the status without using @defer. This version works as expected, which indicates that the store selector itself is functioning properly.

Issue


When testing, you may notice that sometimes the updating state fails to render in the Broken Component. This behavior occurs sporadically, and can be observed by refreshing the StackBlitz project.

What I've Tried

1. Change Detection (markForCheck): Called markForCheck on the pipe inside the selector, but it didn’t resolve the issue.
2. Change Detection (detectChanges): Explicitly invoked detectChanges in the pipe inside the selector, but no improvement.
3. Member Variable for Status: Substituted signal with a member variable to store the status and updated it via a subscription to the selector. This also failed to resolve the issue.

Environment


Angular CLI 18.1.0
Node 18.20.3
Chrome (fails sometimes)
Firefox (fails always)

Expected Behavior


The component should consistently update the template based on the emitted status, regardless of the rendering mechanism or how the data is bound.

Actual Behavior


The component intermittently fails to render certain states (e.g., updating) when using the async pipe combined with @defer. However, this behavior is absent when using signal or when not using the @defer directive.

Reproduction Project

Continue reading...