Question

在404页上，我有一个基于Three.js的动画。在客户端这工作得很好。但是，当使用Angular Universal（基于Firebase Cloud Functions执行的基于NestJS的服务器）在服务器端呈现此代码时，控制台中出现了很多错误：

>  THREE.WebGLRenderer 107
>  THREE.WebGLRenderer: NotYetImplemented
>  ERROR { Error: Uncaught (in promise): Error: NotYetImplemented
>  Error: NotYetImplemented
>      at HTMLCanvasElement.exports.nyi (C:\users\myuser/myapp\node_modules\domino\lib\utils.js:41:9)
>      at new WebGLRenderer (C:\users\myuser/myapp\node_modules\three\build\three.js:23276:30)
>      at new NotFoundComponent (C:\users\myuser/myapp\functions\index.js:4681:25)
>      at createClass (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:20967:24)
>      at createDirectiveInstance (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:20844:24)
>      at createViewNodes (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:29134:40)
>      at createRootView (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:29048:9)
>      at Object.createProdRootView [as createRootView] (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:29560:16)
>      at ComponentFactory_.create (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:20323:33)
>      at ComponentFactoryBoundToModule.create (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:18067:33)
>      at resolvePromise (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:852:31)
>      at resolvePromise (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:809:17)
>      at C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:913:17
>      at ZoneDelegate.invokeTask (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:423:31)
>      at Object.onInvokeTask (C:\users\myuser/myapp\node_modules\@angular\core\bundles\core.umd.js:25994:37)
>      at ZoneDelegate.invokeTask (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:422:60)
>      at Zone.runTask (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:195:47)
>      at drainMicroTaskQueue (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:601:35)
>      at ZoneTask.invokeTask (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:502:21)
>      at Server.ZoneTask.invoke (C:\users\myuser/myapp\node_modules\zone.js\dist\zone-node.js:487:48)

注意：在“查看页面源代码”中，我也看不到任何来自此特定页面的渲染文本。我确实尝试在webpack中将此清单列入白名单，因为这是我用来捆绑此清单的方式，但仍然是相同的错误。

// Ignore all "node_modules" when making bundle on the server.
config.externals = nodeExternals({
  // The whitelisted ones will be included in the bundle.
  whitelist: [
    /^ng-circle-progress/, // Does works correctly, errors for this were gone.
    /^ng2-tel-input/, // Does works correctly, errors for this were gone.
    /^particles.js/, // Doesn't work correctly, doesn't render on the server, but also doesn't throws any errors. Will submit a separated question for this.
    /^three/ // Doesn't work correctly. Throws errors and doesn't render on the server.
  ]
});

THREE.WebGLRenderer：尚未实现〜服务器端渲染（SSR）Angular Universal + NestJS

0 个答案: