Universal: Getting Error while angular universal server running

[sreeragnair]

Bug Report

What is the expected behavior?

should be renders serverside properly.

What is the current behavior?

when i navigate to port 4000,it returns like this.

Node Express server listening on http://localhost:4000
Warning: Flex Layout loaded on the server without FlexLayoutServerModule
/home/ss2/app/dist/server.js:344
throw error;
^

ReferenceError: requestAnimationFrame is not defined
at AnimationFrameAction.requestAsyncId (/home/ss2/app/dist/server.js:30505:40)
at AnimationFrameAction.AsyncAction.schedule (/home/ss2/app/dist/server.js:29678:35)

What modules are related to this issue?

```

• In Angular app ,have used Material,no furher animation Modules.
• [ ] express-engine

[mnahkies]

This question would be more suitable for https://stackoverflow.com/

Warning: Flex Layout loaded on the server without FlexLayoutServerModule

This message is telling you that you haven't correctly loaded the module called FlexLayoutServerModule and then this appears to cause an exception to be thrown later.

If you add FlexLayoutServerModule to the imports of your AppServerModule (or whatever your angular universal entry module is) then it should work fine.

[sreeragnair]

this is the complete log,that warning actually was not an issue.

[email protected] serve:ssr /home/lucifer/Pictures/orderfoodclient
node dist/server

Node Express server listening on http://localhost:4000
/home/lucifer/Pictures/orderfoodclient/dist/server.js:344
throw error;
^

ReferenceError: requestAnimationFrame is not defined
at AnimationFrameAction.requestAsyncId (/home/lucifer/Pictures/orderfoodclient/dist/server.js:30505:40)
at AnimationFrameAction.AsyncAction.schedule (/home/lucifer/Pictures/orderfoodclient/dist/server.js:29678:35)
at AnimationFrameScheduler.Scheduler.schedule (/home/lucifer/Pictures/orderfoodclient/dist/server.js:29887:53)
at AnimationFrameScheduler.AsyncScheduler.schedule (/home/lucifer/Pictures/orderfoodclient/dist/server.js:29838:46)
at Observable._subscribe (/home/lucifer/Pictures/orderfoodclient/dist/server.js:32699:26)
at Observable._trySubscribe (/home/lucifer/Pictures/orderfoodclient/dist/server.js:27945:25)
at Observable.subscribe (/home/lucifer/Pictures/orderfoodclient/dist/server.js:27931:22)
at /home/lucifer/Pictures/orderfoodclient/dist/server.js:31333:31
at subscribeToResult (/home/lucifer/Pictures/orderfoodclient/dist/server.js:31252:84)
at AuditSubscriber._next (/home/lucifer/Pictures/orderfoodclient/dist/server.js:33474:122)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: node dist/server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/lucifer/.npm/_logs/2019-05-19T13_11_57_574Z-debug.log
lucifer@lucifer-HP-15-Notebook-PC:~/Pictures/orderfoodclient$

[mnahkies]

Looks like you/one of your dependencies is using the rxjs animation frame scheduler which based on a cursory glance at its source code relies on the browser API requestAnimationFrame which is not available in nodejs

It's possible this has been manually overridden from the default, or simply the default for some creation operator that you've used, see https://blog.strongbrew.io/what-are-schedulers-in-rxjs/ for an overview of what schedulers are in rxjs.

[sreeragnair]

i havent used anything directly mentioned here https://blog.strongbrew.io/what-are-schedulers-in-rxjs/

[munkhbayar17]

I am experiencing same issue when I start my local express server with angular universal:

ReferenceError: requestAnimationFrame is not defined at AnimationFrameAction.module.exports.AnimationFrameAction.requestAsyncId (C:\Programming\keia-cli\dist\server.js:123109:40) at AnimationFrameAction.module.exports.AsyncAction.schedule (C:\Programming\keia-cli\dist\server.js:81739:35) at AnimationFrameScheduler.module.exports.Scheduler.schedule (C:\Programming\keia-cli\dist\server.js:98895:53) at AnimationFrameScheduler.module.exports.AsyncScheduler.schedule (C:\Programming\keia-cli\dist\server.js:81590:46) at Observable._subscribe (C:\Programming\keia-cli\dist\server.js:90205:27) at Observable.module.exports.Observable._trySubscribe (C:\Programming\keia-cli\dist\server.js:24044:25) at Observable.module.exports.Observable.subscribe (C:\Programming\keia-cli\dist\server.js:24030:22) at subscribeToResult (C:\Programming\keia-cli\dist\server.js:56052:23) at MergeMapSubscriber.module.exports.MergeMapSubscriber._innerSub (C:\Programming\keia-cli\dist\server.js:81342:98) at MergeMapSubscriber.module.exports.MergeMapSubscriber._tryNext (C:\Programming\keia-cli\dist\server.js:81336:14)

[michelepatrassi]

@sreeragnair @munkhbayar17 requestAnimationFrame is defined in the browser, not in node where your server side application runs. Add the following code in your server.ts to define it plus cancelAnimationFrame:

global['requestAnimationFrame'] = function(callback, element) {
  let lastTime = 0;
  const currTime = new Date().getTime();
  const timeToCall = Math.max(0, 16 - (currTime - lastTime));
  const id = setTimeout(function() { callback(currTime + timeToCall); },
    timeToCall);
  lastTime = currTime + timeToCall;
  return id;
};

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

I hope this will help!

[munkhbayar17]

@sreeragnair @munkhbayar17 requestAnimationFrame is defined in the browser, not in node where your server side application runs. Add the following code in your server.ts to define it plus cancelAnimationFrame:

global['requestAnimationFrame'] = function(callback, element) {
  let lastTime = 0;
  const currTime = new Date().getTime();
  const timeToCall = Math.max(0, 16 - (currTime - lastTime));
  const id = setTimeout(function() { callback(currTime + timeToCall); },
    timeToCall);
  lastTime = currTime + timeToCall;
  return id;
};

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

I hope this will help!

Thank yo so much. It works great.

[raju-kommidi]

@sreeragnair @munkhbayar17 requestAnimationFrame is defined in the browser, not in node where your server side application runs. Add the following code in your server.ts to define it plus cancelAnimationFrame:

global['requestAnimationFrame'] = function(callback, element) {
  let lastTime = 0;
  const currTime = new Date().getTime();
  const timeToCall = Math.max(0, 16 - (currTime - lastTime));
  const id = setTimeout(function() { callback(currTime + timeToCall); },
    timeToCall);
  lastTime = currTime + timeToCall;
  return id;
};

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

I hope this will help!

Thanks,
It works for me.

[munkhbayar17]

Yes it works guys. Thanks a lot.