@ngrx/component does not work in SSR + zoneless

[JelleBruisten]

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

component

Minimal reproduction of the bug/regression with instructions

When using ngrxLet in a angular app with both SSR and zoneless, you're faced with an error:

uncaughtException ReferenceError: requestAnimationFrame is not defined.

I made a quick example:
https://github.com/JelleBruisten/ngrxlet-zoneless-ssr

It looks like due that when zoneless we use the AnimationFrameTickScheduler

@Injectable({
  providedIn: 'root',
  useFactory: () => {
    const zone = inject(NgZone);
    return isNgZone(zone)
      ? new NoopTickScheduler()
      : inject(AnimationFrameTickScheduler);
  },
})
export abstract class TickScheduler {
  abstract schedule(): void;
}

And within AnimationFrameTickScheduler we use this, but requestAnimationFrame does not exist in node during the server render:

  schedule(): void {
    if (!this.isScheduled) {
      this.isScheduled = true;
      requestAnimationFrame(() => {
        this.appRef.tick();
        this.isScheduled = false;
      });
    }
  }

We're throwing an error

Expected behavior

To schedule using a different mechanism maybe setTimeout while on server?

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)

ngrx: 19.2.1 ( did try it with latest 20.0.0-rc... )
angular: v20

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[jdegand]

The example link returns a 404. Should be https://github.com/JelleBruisten/v20-ssr ?

Immediate fix could be to polyfill it in the server.ts file similar to this:

global['requestAnimationFrame'] = function(callback) {
  return setTimeout(() => callback(Date.now()), 16);
};

global['cancelAnimationFrame'] = function(id) {
  clearTimeout(id);
};

Also, I would look at using @let instead of ngrxLet directive.

[JelleBruisten]

My bad it was set to private https://github.com/JelleBruisten/ngrxlet-zoneless-ssr should be public now, also I noticed it's not just ngrxLet its also the ngrxPush that suffers from the same problem. ( the async pipe seems to work correctly )

In the example

<div>{{ someValue$ | ngrxPush }}</div>

And yes it would be best to refactor all ngrxLet to @let and replace the ngrxPush with asyncPipe

[markostanimirovic]

Note: The @ngrx/component package is moved to maintenance mode in v20. More info is available here: #4872