CODEWITHSUNDEEP
node.jsangularfirebasegoogle-cloud-functions
eat-sleep-code
eat-sleep-code

Reputation: 4855

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

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.

Upvotes: 0

Views: 1131

Answers (2)

Bharat D Bhadresha
Bharat D Bhadresha

Reputation: 779

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

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18575

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).

Upvotes: 0

Related Questions