Question

我最近为Angular 8实现了Angular Universal。但是运行npm run serve:ssr将返回以下内容：

ReferenceError: document is not defined
    at new CssKeyframesDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/animations/bundles/animations-browser.umd.js:4379:26)
    at instantiateSupportedAnimationDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:412:88)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21002:24)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _createClass (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20989:72)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20957:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21008:71)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)

有人知道那是什么意思吗？

Answer 1

在您的角度应用程序的SSR /通用模式下运行时，不会显示Document，Window，localstorage等客户端代码/关键字，因为第一页将在服务器。

窗口，文档，本地存储，导航器和其他浏览器类型-在服务器上不存在-因此使用它们或使用它们的任何库（例如jQuery）在SSR模式下均不起作用。

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

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


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

Answer 2

这种方法很难设置，您需要浏览所有有导航器，窗口本地存储...的地方并进行修改。

这可以在server.ts的上游完成，请点击以下链接： https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/ssr-rendering.html

Angular Universal npm run serve：ssr返回“未定义文档”

2 个答案: