Skip to content

Server-side running code throws an error if the provideZoneChangeDetection is used #50801

@arturovt

Description

@arturovt

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

core

Is this a regression?

No

Description

The code which is running in the Node.js throws an error Cannot read properties of undefined (reading 'call') when the provideZoneChangeDetection is called in ApplicationConfig.providers.

This happens because the NgZone delays change detection to coalesce event tasks (happened within the same animation frame) or multiple ngZone.run calls in a row. The change detection is delayed through the native requestAnimationFrame which isn't available in the Node.js.

Quick solution:

// server.ts
import 'zone.js/node';

globalThis.requestAnimationFrame =
  // @ts-ignore
  setTimeout[Zone.__symbol__('OriginalDelegate')];
globalThis.cancelAnimationFrame =
  // @ts-ignore
  setTimeout[Zone.__symbol__('OriginalDelegate')];

Please provide a link to a minimal reproduction of the bug

https://github.com/arturovt/provide-cd-ssr

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.1.0
Node: 16.18.0
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 16.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.0
@angular-devkit/build-angular   16.1.0
@angular-devkit/core            16.1.0
@angular-devkit/schematics      16.1.0
@angular/cli                    16.1.0
@nguniversal/builders           16.1.0
@nguniversal/express-engine     16.1.0
@schematics/angular             16.1.0
rxjs                            7.8.1
typescript                      5.1.3

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: serverIssues related to server-side renderingstate: has PR

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions