Question

我有一个Angular 7网站，无需服务器端渲染（SSR）即可正常工作。我使用Google的Firebase托管来托管它。我现在想设置SSR。我遵循了this guide，并获得了它来构建和部署到Firebase托管和功能。

但是，该站点无法加载，并且功能日志中包括以下条目：

ERROR ReferenceError：未定义文档在新的CssKeyframesDriver（/user_code/node_modules/@angular/animations/bundles/animations-browser.umd.js:4246:26）在InstantiateSupportedAnimationDriver（/user_code/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:412:88）在_callFactory（/user_code/node_modules/@angular/core/bundles/core.umd.js:19867:24）在_createProviderInstance（/user_code/node_modules/@angular/core/bundles/core.umd.js:19825:30）在resolveNgModuleDep（/user_code/node_modules/@angular/core/bundles/core.umd.js:19786:25）在_createClass（/user_code/node_modules/@angular/core/bundles/core.umd.js:19854:72）在_createProviderInstance（/user_code/node_modules/@angular/core/bundles/core.umd.js:19822:30）在resolveNgModuleDep（/user_code/node_modules/@angular/core/bundles/core.umd.js:19786:25）在_callFactory（/user_code/node_modules/@angular/core/bundles/core.umd.js:19873:71）在_createProviderInstance（/user_code/node_modules/@angular/core/bundles/core.umd.js:19825:30）

关于什么是错的任何想法？如果需要，我可以提供代码段或对存储库的单独读取访问权限。

Answer 1

服务器端渲染可能意味着从Node.js和Express.js提供HTML。在Firebase产品套件中，这是使用Cloud Functions for Firebase的HTTP triggers实现的。

您可以在Github上查看Firebase Samples。这是一个相对高级的实现，因此只要您精通JavaScript，HTML和CSS（更不用说Angular），就可以继续进行。

Answer 2

Angular SSR尝试运行角度动画，但找不到任何document变量（服务器端没有document）。您可以通过在isPlatformBrowser和isPlatformServer的帮助下有条件地执行代码来解决此问题。

示例

导入

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

这样的用户

constructor(@Inject(PLATFORM_ID) platformId: string){
    this.isBrowser = isPlatformBrowser(platformId);
    this.isServer = isPlatformBrowser(platformId);
    if(this.isBrowser){
        //Do something on the browser
    }
    if(this.isServer){
        //Do something on the server
    }
}

尝试在Google Firebase托管上设置服务器端呈现（SSR）

2 个答案: