angularfire: Firestore does not work with Angular Universal and AngularFire2 on Firebase Functions

Angular: 6.0.6

Firebase: 5.0.4

AngularFire: 5.0.0-rc.10

Other (e.g. Ionic/Cordova, Node, browser, operating system): OS: Windows 10 Node version: 8.11.2

Steps to set up and reproduce

Clone this repository: https://github.com/phpet/ssr

npm run build:ssr firebase deploy

Debug output

** Errors in the Firebase Functions logs **

Unhandled Promise rejection: Cannot read property 'firestore' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'firestore' of undefined
    at new AngularFirestore (/user_code/node_modules/angularfire2/bundles/firestore.umd.js:148:29)
    at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:8204:20)
    at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:8166:26)
    at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8129:21)
    at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:8837:16)
    at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:9202:45)
    at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:9076:85)
    at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8959:20)
    at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:10179:36)
    at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:10093:5) TypeError: Cannot read property 'firestore' of undefined
    at new AngularFirestore (/user_code/node_modules/angularfire2/bundles/firestore.umd.js:148:29)
    at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:8204:20)
    at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:8166:26)
    at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8129:21)
    at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:8837:16)
    at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:9202:45)
    at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:9076:85)
    at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8959:20)
    at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:10179:36)
    at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:10093:5)

** Screenshots **

https://imgur.com/5Ybcdw5

Expected behavior

Injecting the AngularFirestore variable in the constructor of the AppComponent class should work without errors.

Actual behavior

The browser shows a 504 Gateway Time-out error and the Firebase Functions logs show the error above.

I also tried with the latest version of AngularFire2 5.0.0-rc.11 and it doesn’t work either.

Interesting facts

I tried replacing the angularfire2 library with angularfire-lite and it worked, so it’s definitely related to the combination of AngularFire2 and Firestore.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 23 (6 by maintainers)

Most upvoted comments

@phpet This unfortunately a known issue with Cloud Functions and AF2. We are working on a fix.

It’s not surprising that AngularFireLite worked as it simply just switches to REST calls on the server. This is a quick fix but it becomes more complicated with authentication. It also increases the bundle size of the application since you’re shipping two network clients. A fun fact here is that AngularFireLite is actually heavier than AngularFire2.

I’ll keep you updated in this thread.

davideast on Jun 24, 2018

Is there any news?

Please solve it.

tarsinzer on Jul 2, 2018

I still can’t get firestore to work on SSR. Been trying for days. No errors on build or serving the node express app. It just doesn’t pre-render on server side. When adding a timeout will render the html after a few seconds.

wdumlao1 on Jan 30, 2020

I would really love for this to be fixed 😐

Have been trying to make it work the past 2 days.

What fails for me is AngularFireAuth:

TypeError: Cannot read property 'auth' of undefined
    at new AngularFireAuth (/user_code/node_modules/angularfire2/bundles/auth.umd.js:11:24)
    at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:8307:20)
    at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:8269:26)
    at initNgModule (/user_code/node_modules/@angular/core/bundles/core.umd.js:8202:32)
    at new NgModuleRef_ (/user_code/node_modules/@angular/core/bundles/core.umd.js:8928:9)
    at Object.createNgModuleRef (/user_code/node_modules/@angular/core/bundles/core.umd.js:8917:12)
    at NgModuleFactory_.create (/user_code/node_modules/@angular/core/bundles/core.umd.js:11444:25)
    at /user_code/node_modules/@angular/core/bundles/core.umd.js:4330:43
    at ZoneDelegate.invoke (/user_code/node_modules/zone.js/dist/zone-node.js:388:26)
    at Object.onInvoke (/user_code/node_modules/@angular/core/bundles/core.umd.js:3841:33)

kanafghan on Jul 4, 2018

@phpet This unfortunately a known issue with Cloud Functions and AF2. We are working on a fix.

It’s not surprising that AngularFireLite worked as it simply just switches to REST calls on the server. This is a quick fix but it becomes more complicated with authentication. It also increases the bundle size of the application since you’re shipping two network clients. A fun fact here is that AngularFireLite is actually heavier than AngularFire2.

I’ll keep you updated in this thread.

Did this get fixed? because im having trouble with angular universal and firestore

calibri87 on Apr 11, 2019

@odineshrao , my problem is solved in recent release (@angular/fire package instead angularfire2)

tarsinzer on Sep 8, 2018

Solved in recent releases, docs are up for review #1841

jamesdaniels on Sep 7, 2018

@danwulff and @JancoBH FYI, I have been trying to do so the last 2 days but without any luck 😞

kanafghan on Aug 16, 2018

With the announcement of the Node 8 runtime, will this now work?

New runtime configuration options with Cloud Functions for Firebase August 13, 2018 Node.js 8 runtime now available

https://firebase.googleblog.com/2018/08/cloud-functions-for-firebase-config-node-8-timeout-memory-region.html

danwulff on Aug 14, 2018

Hi @jamesdaniels, @davideast,

Without adding pressure on you, do you have a rough idea about a date for the fix to be delivered? Are we speaking about days? months?

Why this question? => to know if I can include this functionality in my next project release planned for the end of this month, or if I have to postpone it.

Thank you guys ! (and thanks for your hard work !)

vroussel35 on Jul 13, 2018

@davideast thanks for the update.

Unfortunately, ever since you started that “server side frender” video last September, I tried again and again and could never quite make SSR work on Firebase Functions. So, you see, somehow it’s your fault. 😃

Now, I was able to make it work on Node8 in App Engine but I really like the simplicity and ease of mind of Firebase Functions. So I guess my question is, should I give up and implement it with App Engine or should I wait for the fix so I can use my favorite Firebase services? And if I should wait, how much do you think this would take?

Really appreciate your time spent on this.

Let me know if there is anything I can do to help.

phpet on Jun 26, 2018