Angular Ivy 9.0 stable and angularfire RC1 using Firestore have trouble with Universal

[hiepxanh]

Version info

Angular: "@angular/animations": "~9.0.0", "@angular/cdk": "^9.0.0", "@angular/common": "~9.0.0", "@angular/compiler": "~9.0.0", "@angular/core": "~9.0.0", Firebase:

"_from": "firebase@>= 5.5.7 <8",
  "_id": "firebase@7.8.1",

AngularFire:

"@angular/fire": "^6.0.0-rc.1",

How to reproduce these conditions

stackbliz github

project link will be delete after resolve this issue

Steps to set up and reproduce

after adding Angularfire, it's work normally. But when I start with Universal build, it have problem, clone project and start: npm run dev:ssr

Debug output

E:\coronavirus-tracking\dist\coronavirus-tracking\ser
ver\main.js:197014
        throw new Error("package.json does not exist at " + package_json_path);
        ^

Error: package.json does not exist at E:\coronavirus-tracking\dist\coronavirus-tracking\package.json
    at Object../node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js.exports.find (E:\coronavirus-tracking\dist\coronavirus-tracking\server\main.js:197014:15)

Screenshots

after comment firebase library:

look like the error disappear but sure. angularfire cannot run without firebase/firestore

Expected behavior

not have error when building with universal

Actual behavior

build not succesful

already read about: #2284 angular issue #34544

2280

i'm starting desperated after 5 hours

Updated

universal #1207 suggest adding this but it not work:

// angular.json >  architect.server.options
"externalDependencies": [
  "grpc",
  "@grpc/proto-loader"
]

Updated 1

#2284 suggest adding "@angular/fire/firestore" seem work but got other error:

// angular.json >  architect.server.options
"externalDependencies": [
  "grpc",
  "@grpc/proto-loader",
   @angular/fire/firestore"
]

Cannot read property 'id' of undefined

Reference to this update 2

update 3:

add "bundleDependencies": true to angular.json then run npm run build:ssr && npm run serve:ssr having this issues. guest that relate to this #2280

ERROR Error: inject() must be called from an injection context

solution: https://github.com/hiepxanh/angularfire2/blob/a45e0ad4f1c918e78a1610d2b73dee3cc9b1f6b1/docs/universal/getting-started.md

[yasinkocak]

Yes it's worked but u can wait on angularfire 6.1 there are little bugs but workaround is possible to getting works

[epiphanatic]

It definitely works and I have deployed an app to production, there are just so many little things you have to get right or page won't load (eg you need to only execute anything auth related if browser), data from database won't get retrieved in time to be SSR'd (a task scheduler may be needed), or a number of other things you won't find in any documentation or tutorials floating around. I spent weeks getting mine working with my particular setup. But it is possible.

[yasinkocak]

Can you share the details or update the documentations @epiphanatic ?

[epiphanatic]

@yasinkocak well, part of what I'm getting at here is that it's not that simple. I would love to write a Medium article, but I can't just write up a general solution because 1) people have very different setups, and 2) all of this keeps changing so fast (eg what external dependencies to include or not and which exact package name, among others). You simply have to put in the time reading SO regarding specific issues you are facing, understanding the specifics of how each individual piece works, comparing all that to the exact versions of things being used in examples you see, and so on. Maybe soon SSR + Firebase + SEO (another issue all itself) will be a simple plug and play thing, but for now it is not.

[hiepxanh]

@epiphanatic did U try this https://github.com/angular/angularfire/issues/2320#issuecomment-623422132

[rvbiljouw]

Any solution regarding to this error?

node dist/server

//dist/server/main.js:23730 throw err; ^

Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto' at Object.openSync (fs.js:448:3) at Object.readFileSync (fs.js:348:35)

Seeing the same issue here - did you find a solution?

[jdgamble555]

That particular error happens when you don't have @firebase/firestore added to your module. @rvbiljouw

[vroussel35]

data from database won't get retrieved in time to be SSR'd (a task scheduler may be needed)...

Hi @epiphanatic: are you able to show us a demo or a way to do it for the "data from database won't get retrieved in time to be SSR'd (a task scheduler may be needed)" as we are facing timeout errors since we've updated to angularfire 6+.

Can you confirm that you were successful with a simple task like retrieving data from firestore (using promise or observable) and SSR'd them?

[epiphanatic]

@vroussel35 yes, I am able to anything that you would normally do with the database and SSR will work as well as being able to retrieve metadata (if you've set that up in your code). I just followed this https://stackoverflow.com/questions/47151811/server-does-not-wait-till-http-call-completes-before-rendering-angular-4-serve. Just wrap whatever DB call you want to be SSRd or put in metadata in that service.

I'm not saying this is the best way, or that it can't work without it, I just personally could not find another way to do it if the goal is to do this stuff with dynamic content / routes. But from what I understand, you could do all this otherwise if you are using prerendering and content / routes are known beforehand (see fireship.io).

It would be nice if the AngularFire team could build something like this in assuming this is indeed a requirement and not just my amateur-ness ;)

[waterplea]

Sorry to dig this up, but I'm having issues with firebase, @angular/fire and Universal. It was working for me for following versions:

"@angular/fire": "6.0.3",
"firebase": "7.14.1",

Now I have updated to the latest 6.1.1 and 8.1.1 accordingly and when I open SSR built page I get this error in server console:

ERROR Error: Uncaught (in promise): TypeError: app.firestore is not a function
TypeError: app.firestore is not a function

Any ideas what could this be? My app is rather basic :(

[mazlano27]

Sorry to dig this up, but I'm having issues with firebase, @angular/fire and Universal. It was working for me for following versions:

"@angular/fire": "6.0.3",
"firebase": "7.14.1",

Now I have updated to the latest 6.1.1 and 8.1.1 accordingly and when I open SSR built page I get this error in server console:

ERROR Error: Uncaught (in promise): TypeError: app.firestore is not a function
TypeError: app.firestore is not a function

Any ideas what could this be? My app is rather basic :(

I faced a similar issue. 2 things helped me:

1) Removing firestore from external dependencies angular.json

2) Downgrading firebase to 8.0.x

[jdgamble555]

@waterplea Make sure you update the way you import firebase to this:

import firebase from 'firebase/app';

[waterplea]

@jdgamble555 I did update it this way in my login component, so I can call new firebase.auth.GoogleAuthProvider() but for Firestore I only have this in my main module:

import 'firebase/firestore';

Do I need to change it somehow?

@mazlano27 If I do that I'm getting this error when I open route that uses firestore:

[2020-11-25T09:48:03.294Z]  @firebase/firestore: Firestore (8.0.2): INTERNAL UNHANDLED ERROR:  Error: ENOENT: no such file or directory, open 'XXX\server\src\protos\google\firestore\v1\firestore.proto'

[waterplea]

All right, this issue has helped me: https://github.com/firebase/firebase-js-sdk/issues/3541

Apparently, you now need to also add @firebase/app to externalDependencies too. I'm facing more issues but they seem to be unrelated to this anymore.

[michaeljpeake]

Hi there. A lot of content to consume on this page and I'm a noob when it comes to SSR.

Is the conclusion that you get this error because there are files required for firebase (e.g. @firebase/app and @firebase/firestore) that aren't included for SSR unless you add them explicitly to externalDependencies?

I've added the two dependencies above in the server block in my angular.json and everything seems to work perfectly now. I was a little disappointed that didn't work out the box with ng add @nestjs/ng-universal. However, it seems an easy enough fix ... did I miss it being documented somewhere?