fix(core): render hooks should not specifically run outside the Angular zone (#55399)

atscott · AndrewKushnir · commit 7e89753eeff2 · 2024-04-25T09:06:34.000-07:00
The timing of render hook execution is almost entirely identical to `ngZone.onMicrotaskEmpty`. Developers working towards zoneless compatibility will need to migrate `onMicrotaskEmpty` calls to use `afterNextRender`/`afterRender` instead. This, however, would lead to confusing issues if there are promises in the callbacks because `onMicrotaskEmpty` emits inside the Angular zone while render hooks execute outside today. This is problematic because it's not documented and does not produce any notification or error message when async work is done inside the hooks that requires change detection. Instead, change detection simply does not run, and this behavior has proven to be surprising to developers who are used to ZoneJS change detection behavior. fixes #55299 PR Close #55399
diff --git a/packages/core/src/render3/after_render_hooks.ts b/packages/core/src/render3/after_render_hooks.ts
@@ -331,7 +331,6 @@ export function afterNextRender(
  * A wrapper around a function to be used as an after render callback.
  */
 class AfterRenderCallback {
-  private zone = inject(NgZone);
   private errorHandler = inject(ErrorHandler, {optional: true});
 
   constructor(readonly phase: AfterRenderPhase, private callbackFn: VoidFunction) {
@@ -341,7 +340,7 @@ class AfterRenderCallback {
 
   invoke() {
     try {
-      this.zone.runOutsideAngular(this.callbackFn);
+      this.callbackFn();
     } catch (err) {
       this.errorHandler?.handleError(err);
     }
