Skip to content

fix(component): use setTimeout instead of requestAnimationFrame for server and zoneless #4912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

JelleBruisten
Copy link

…stead of requestAnimationFrame

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[X] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

When using either ngrxLet or ngrxPush in ssr and zoneless, the server calls requestAnimationFrame which does not exist in a node environment.

Closes #4902

What is the new behavior?

Within a node environment ( ssr ) and zoneless we use setTimeout instead of requestAnimationFrame.

Does this PR introduce a breaking change?

[ ] Yes
[X] No

Other information

I did some more testing on angular v20, when using ssr + zoneless and using a NoopTickScheduler it does trigger changes. I opted for not removing the NoopTickScheduler and making big changes since @ngrx/component is in maintenance mode.

Copy link

netlify bot commented Aug 5, 2025

Deploy Preview for ngrx-io ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 35326c7
🔍 Latest deploy log https://app.netlify.com/projects/ngrx-io/deploys/689874c0ea48340008a21fb9
😎 Deploy Preview https://deploy-preview-4912--ngrx-io.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Member

@markostanimirovic markostanimirovic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @JelleBruisten! See the requested changes below.

It's also necessary to add a unit test and verify the fix.

@JelleBruisten JelleBruisten force-pushed the master branch 2 times, most recently from 497c3d1 to e9223ec Compare August 6, 2025 07:41
@markostanimirovic markostanimirovic changed the base branch from master to main August 10, 2025 00:03
@markostanimirovic
Copy link
Member

@JelleBruisten target branch has to be main, not master.

Copy link

netlify bot commented Aug 10, 2025

Deploy Preview for ngrx-site-v19 ready!

Name Link
🔨 Latest commit 35326c7
🔍 Latest deploy log https://app.netlify.com/projects/ngrx-site-v19/deploys/689874c03705fe000867da6c
😎 Deploy Preview https://deploy-preview-4912--ngrx-site-v19.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@JelleBruisten JelleBruisten force-pushed the master branch 2 times, most recently from f64349d to ec58077 Compare August 10, 2025 10:28
…erver and zoneless

requestAnimationFrame is not available in server-side contexts and will cause errors.
Using setTimeout ensures compatibility across all environments.
@JelleBruisten
Copy link
Author

@markostanimirovic I rebased the branch from the main branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

@ngrx/component does not work in SSR + zoneless
2 participants