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.
node.js angular firebase google-cloud-functions
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
add a comment |
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.
node.js angular firebase google-cloud-functions
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
Have you tried github.com/angular/angular/issues/14784 ?
– yurzui
Dec 29 '18 at 3:09
I will try this. So I just add that module as an include at the top of my server module?
– eat-sleep-code
Dec 30 '18 at 15:16
@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
Jan 4 at 20:15
add a comment |
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.
node.js angular firebase google-cloud-functions
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
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.
node.js angular firebase google-cloud-functions
node.js angular firebase google-cloud-functions
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
asked Dec 29 '18 at 2:11
eat-sleep-codeeat-sleep-code
1,59562163
1,59562163
Have you tried github.com/angular/angular/issues/14784 ?
– yurzui
Dec 29 '18 at 3:09
I will try this. So I just add that module as an include at the top of my server module?
– eat-sleep-code
Dec 30 '18 at 15:16
@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
Jan 4 at 20:15
add a comment |
Have you tried github.com/angular/angular/issues/14784 ?
– yurzui
Dec 29 '18 at 3:09
I will try this. So I just add that module as an include at the top of my server module?
– eat-sleep-code
Dec 30 '18 at 15:16
@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
Jan 4 at 20:15
Have you tried github.com/angular/angular/issues/14784 ?
– yurzui
Dec 29 '18 at 3:09
Have you tried github.com/angular/angular/issues/14784 ?
– yurzui
Dec 29 '18 at 3:09
I will try this. So I just add that module as an include at the top of my server module?
– eat-sleep-code
Dec 30 '18 at 15:16
I will try this. So I just add that module as an include at the top of my server module?
– eat-sleep-code
Dec 30 '18 at 15:16
@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
Jan 4 at 20:15
@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
Jan 4 at 20:15
add a comment |
1 Answer
1
active
oldest
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).
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53966149%2ftrying-to-setup-server-side-rendering-ssr-on-google-firebase-hosting%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
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).
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
add a comment |
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).
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
add a comment |
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).
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
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).
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
answered Dec 29 '18 at 3:38
Ron RoystonRon Royston
5,98532539
5,98532539
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53966149%2ftrying-to-setup-server-side-rendering-ssr-on-google-firebase-hosting%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried github.com/angular/angular/issues/14784 ?
– yurzui
Dec 29 '18 at 3:09
I will try this. So I just add that module as an include at the top of my server module?
– eat-sleep-code
Dec 30 '18 at 15:16
@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
Jan 4 at 20:15