Angular Universal 错误 ReferenceError：未定义 MouseEvent

Question

我正在使用 Angular Universal 渲染 ssr，同时使用 Angular cli 命令：npm run build:ssr && npm run serve:ssr，我收到错误。

使用 Angular8

/home/xyz/projects/my-app/dist/server/main.js:139925
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [MouseEvent, HTMLElement]),
                                                                               ^

ReferenceError: MouseEvent is not defined
    at Module.UPO+ (/home/xyz/projects/my-app/dist/server/main.js:139925:84)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! patient-app@0.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the patient-app@0.0.0 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/vijay/.npm/_logs/2019-10-18T07_30_11_791Z-debug.log

Answer 1

Document、Window、localstorage、MouseEvent 等客户端代码在 Angular 应用程序的通用模式下运行时将不存在，因为您的第一页将在服务器上呈现。

因此，如果您的代码中存在任何此类代码，那么您需要像这样将您的客户端代码包装在 platformBrowser 中 -

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


constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
){
    if (isPlatformBrowser(this.platformId)) {
       // MouseEvent code
    }
}