Angular 服务器端渲染错误 HTMLCanvasElement.exports.nyi

Question

错误：未实现 在 HTMLCanvasElement.exports.nyi (C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:30071:9) 在 C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:391458:34898 在 C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:391458:35221 在 C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:391458:45461 在 Object. (C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:391458:47139) 在 webpack_require (C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:20:30) 在 Object.web-animations-js (C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:371112:18) 在 webpack_require (C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:364897:30) 在 Object../src/app/home/home.component.ts (C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:366546:1) 在 webpack_require (C:\frontend_server_side_rendering\NewUIUX2nd\bbbcustomerui\dist\server.js:364897:30)

我在 Angular 5 服务器端渲染时遇到了这个错误。

- samarth s

Answer 1

这是因为SSR DOM实现尚未支持<canvas>元素。 参见：angular/universal-starter#538 (comment) 如果您想在Angular Universal中使用它，请将以下内容添加到您的HTML中：

<canvas *ngIf="isBrowser">

在您组件的 .ts 文件中，可以按以下方式进行操作：

import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

public isBrowser: boolean;

constructor(@Inject(PLATFORM_ID) platformId: Object, private renderer2: Renderer2) {
  this.isBrowser = isPlatformBrowser(platformId);
}

在Angular Universal "Gotchas"中了解更多相关信息。

- Daniel Danielecki