`ChangeDetectorRef.markForCheck()` in the `ngAfterContentInit` of a nested component is ignored

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Suppose you have a component Root, which uses component Child in its view. Component Child implements the ngAfterContentInit hook. If this hook somehow triggers markForCheck() in the ChangeDetectorRef of the Root component, this call is ignored.

I don’t know if this is actually a bug. The minimal StackBlitz uses Angular in a very weird way. That’s why I created a second StackBlitz which shows a potential use case where it causes problems, using the async pipe and a service. You can easily run into this problem if you use rxjs to bidirectionally communicate between components.

Both examples show that calling markForCheck in the button click trigger a content change because the actual markForCheck got ignored.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-sbhh57 (minimal)

https://stackblitz.com/edit/angular-ivy-jkqseu (showing use case)

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular 12.2.9
Linux (WSL)
Node 12.18.3

Anything else?

You’re awesome!

[JoostK]

This appears to be due to a data flow issue that would result in ExpressionChangedAfterItHasBeenCheckedError. The data model is currently dependent on the render result of the UI, but then that updated data model (concretely, its count) is also rendered into the UI. That’s invalid, as it means that two change detection cycles are required to correctly update the DOM.

The ExpressionChangedAfterItHasBeenCheckedError is not actually reported due to a known bug with OnPush components. A component that is OnPush marks itself as non-dirty before the check no changes phase, causing the check no changes cycle to also skip visiting that component.

If you remove all OnPush usages you will see the ExpressionChangedAfterItHasBeenCheckedError being reported.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}