Angular Universal npm run serve: ssr возвращает «документ не определен» - PullRequest
0 голосов
/ 16 октября 2019

Я недавно внедрил Angular Universal для Angular 8. Однако при запуске 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)

Кто-нибудь знает, что это значит?

1 Ответ

1 голос
/ 16 октября 2019

Код / ключевые слова на стороне клиента, такие как Document, Window, localstorage и т. Д., Не будут отображаться при работе в режиме SSR / Universal вашего углового приложения, так как ваша первая страница будет отображаться на сервере.

окно, документ, localstorage, навигатор и другие типы браузеров - не существуют на сервере - поэтому их использование или любая библиотека, которая их использует (например, jQuery), не будет работать в SSRmode.

Итак, если в вашем коде присутствует такой фрагмент кода, вам нужно обернуть код на стороне клиента в 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
    }
}
...