为什么 Angular Universal 不能正常工作

Question

根据官方 Angular 文档，我正在将现有的 Angular 应用程序转换为 Angular Universal。

构建完成后，当我导航到端口 4000 时，服务器因此错误而停止。

ReferenceError: requestAnimationFrame 未定义

这些是我遵循的步骤，基于官方文档

1.ng add @nguniversal/express-engine --clientProject projname

2.npm run build:ssr && npm run serve:ssr

Answer 1

requestAnimationFrame 是在浏览器中定义的，而不是在运行服务器端应用程序的节点中。在您的server.ts 中添加以下代码来定义它加上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);
};

我希望这会有所帮助！

如果您在 SSR 方面遇到任何其他问题，check if this article already covers it。