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

[phpet]

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.

[davideast]

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

[phpet]

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

[retarsis]

Is there any news?

Please solve it.

[kanafghan]

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)

[JancoBH]

Is there any news? :(

[jamesdaniels]

While we are diagnosing troubles with the Cloud Functions enivornment, I'd
suggest spinning your code up on AppEngine.

On Tue, Jul 10, 2018, 8:29 AM Janco Boscan [e-mail] wrote:

Is there any news? :(

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/1745#issuecomment-403865003,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AACvrzkCCGqHcL9JSVt4tHS7s4Pesg3nks5uFMhTgaJpZM4U0baG
.

[patrickmichalina]

Server side auth has still not been addressed for both firestore and rtdb. No repo owners have given help for this issue in this or other tickets.

[jamesdaniels]

@patrickmichalina let's keep it on topic here please.

[vroussel35]

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

[jamesdaniels]

We've not found any bugs here, like many of the issues floating around, this is likely caused by a bad combination of node_modules.

[jamesdaniels]

The main problem is the firebase JS SDK is not developed with the intention of developers installing @firebase/* anything by themselves, as they are 0.x releases and unstable.

Yarn complains about missing peer deps, developer installs them, breaks everything, everyone is sad and frustrated.

There are lingering & inconsistent problems with Zone.js on Cloud Functions, with their flavor of node, which have yet to be diagnosed; but I don't think you're that far. We're won't have bandwidth from the Functions team to hunt down those issues until they come out of beta. Before that we're still suggesting people deploy their SSR apps on AppEngine.

[BluebambooSRL]

Hi @jamesdaniels, @davideast
Do you know if there is any update on this?

Many thanks for the work/information that you provide.
Federico

[danwulff]

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

[JancoBH]

I have the same question of @danwulff

[kanafghan]

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

[kanafghan]

Out of curiosity, I've tried to experiment with how to make Firebase realtime-database work with Angular Universal and Cloud Functions using the newly added Node.js 8 runtime. To do so, I have created a demo/experiment app.

The good news is that it is working, but as long as we do not access database() from firebase-admin in the startup script, i.e. during deployment of the functions. The database() access should happen during runtime of the function(s).

[fcalderon]

I just learned about this issue the hard way :cry:

OS (environment): Docker image node:carbon (hosted on Ubuntu)
node version: v8.10.0
angular fire: 5.0.0-rc.9
angular: ^6

I spent a few hours trying to debug my app which has hanging for some reason. The hanging started after pushing a fix to a bug which was preventing a call to AngularFireDatabase#object. it was hanging because of this, right were AngularFireDatabase#object was being called. However, there was no error, no warning, and no log, from AngularFire indicating that it doesn't work on SSR.

I was wondering if, while this issue is resolved, an error can be thrown from AngularFireDatabase, if called on the server side, to indicate that this is not supported instead of just hanging for ever?

[jamesdaniels]

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

[odineshrao]

i am too facing the issue with AngularFire2 and cloud function:
ERROR TypeError: Cannot read property 'storage' of undefined
at new AngularFireStorage

[retarsis]

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

[odineshrao]

@maktarsis ya, my problem is also solved after update angularfire2

[calibri87]

@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

[wdumlao1]

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.