Trying to setup server-side rendering (SSR) on Google Firebase hosting

0
votes

I have an Angular 7 site, that works fine without server-side rendering (SSR). I host it using Google's Firebase hosting. I now want to setup SSR. I followed this guide and got it to build and deploy to Firebase Hosting and Functions.

However, the site does not load and the Functions logs include this entry:

ERROR ReferenceError: document is not defined at new CssKeyframesDriver (/user_code/node_modules/@angular/animations/bundles/animations-browser.umd.js:4246:26) at instantiateSupportedAnimationDriver (/user_code/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:412:88) at _callFactory (/user_code/node_modules/@angular/core/bundles/core.umd.js:19867:24) at _createProviderInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:19825:30) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:19786:25) at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:19854:72) at _createProviderInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:19822:30) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:19786:25) at _callFactory (/user_code/node_modules/@angular/core/bundles/core.umd.js:19873:71) at _createProviderInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:19825:30)

Any ideas of what is wrong? I can provide code snippets or individual read access to the repo if requested.

2
node.jsangularfirebasegoogle-cloud-functions
Have you tried github.com/angular/angular/issues/14784 ? – yurzui
I will try this. So I just add that module as an include at the top of my server module? – eat-sleep-code
@yurzui I tried this, but to no avail. PS: It also appears that wouldn't be an issue anymore since it was fixed in Angular 4.x and I am in Angular 7. – eat-sleep-code

2 Answers

0
votes

Server side rendering probably means serving HTML from Node.js w Express.js. In the Firebase suite of products, this is accomplished using Cloud Functions for Firebase's HTTP triggers.

You can have a look at Firebase Samples on Github. This is a relatively advanced implementation so proceed as long as you are strong in JavaScript, HTML, and CSS (not to mention Angular).

0
votes

Angular SSR is trying to run angular animations but it's not able to find any document variable(there is no document on server-side). You can solve this by conditionally executing your code with the help of isPlatformBrowser and isPlatformServer.

example

Import this

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

User like this

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
    }
}