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

[mazlano27]

@hiepxanh Found a solution?

[jamesdaniels]

Thanks for digging in here, I’ll spend some time debugging too. I’ll want to address for 6.0 stable.

[hiepxanh]

@mazlano27 not yet sir. Still digging and stop at there. maybe the problem is UMD and ESM2015 but I don't have experience about this

[hiepxanh]

@jamesdaniels you're welcome, I'll do anything you need if you want me to help

[mazlano27]

@mazlano27 not yet sir. Still digging and stop at there. maybe the problem is UMD and ESM2015 but I don't have experience about this

Thank you. Are you able to SSR Angular 9 with @angular/fire@5.4.2? I am getting the same/similar errors you have documented above and am unable to find a working solution

[hiepxanh]

@mazlano27 no sir, I belive this problem is will be resolve soon, just maybe some conflict on the module loader conflict.

[hiepxanh]

"externalDependencies": [
  "grpc",
  "@grpc/proto-loader",
   @angular/fire/firestore"
]

keep digging deeper, look like I found the loop:
if we not includes externalDependencies['@angular/fire/firestore'] => it cannot load and have trouble with grpc like Error: package.json does not exist
if we have it in the list => it may not complied by Ivy => ɵmod not exist => causing this problem. Cannot read property 'id' of undefined

[tiagorvs]

@hiepxanh I was successful disabling Ivy.

tsconfig.json

"angularCompilerOptions": {
    "enableIvy": false
  }

server.ts

import { AppServerModuleNgFactory } from './src/app/app.server.module.ngfactory';
server.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
}));

angular.json > architect.server.options

"externalDependencies": [
   "grpc",
   "@grpc/proto-loader",
   "@angular/fire/firestore",
   "firebase/firestore"
]

[hiepxanh]

I understand sir @tiagorvs, but I would like to work with ivy to get the best performance since angular 9 enable ivy by default

[vroussel35]

Is there any workaround available today? (I've tried the externalDependencies with grpc but it was not successful as previously mentioned by @hiepxanh )

[vroussel35]

Hi @tiagorvs,

I tried your exact same solution (deactivating Ivy - not forgetting to change the server.ts & externalDependencies) and this was not working for us.

On our Google Run instance logs, we have the following stacktrace :

A 2020-02-11T01:26:18.885153Z Error: ENOENT: no such file or directory, open '/usr/src/app/dist/server/src/protos/google/firestore/v1/firestore.proto'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at fetch (/usr/src/app/node_modules/protobufjs/src/root.js:160:34)
    at Root.load (/usr/src/app/node_modules/protobufjs/src/root.js:194:13)
    at Root.loadSync (/usr/src/app/node_modules/protobufjs/src/root.js:235:17)
    at Object.loadSync (/usr/src/app/node_modules/@grpc/proto-loader/build/src/index.js:221:27)
    at loadProtos (/usr/src/app/dist/server/main.js:1:3473991)
    at NodePlatform.loadConnection (/usr/src/app/dist/server/main.js:1:3474148)
    at FirestoreClient.initializeRest (/usr/src/app/dist/server/main.js:1:3385245)
    at /usr/src/app/dist/server/main.js:1:3382126
    at resolvePromise (/usr/src/app/dist/server/main.js:1:6702620)
    at /usr/src/app/dist/server/main.js:1:6700877
    at /usr/src/app/dist/server/main.js:1:6701192
    at ZoneDelegate.invoke (/usr/src/app/dist/server/main.js:1:6692914)
    at Object.onInvoke (/usr/src/app/dist/server/main.js:1:2569324)
    at ZoneDelegate.invoke (/usr/src/app/dist/server/main.js:1:6692810)
    at Zone.run (/usr/src/app/dist/server/main.js:1:6685328)
    at /usr/src/app/dist/server/main.js:1:6704218
    at ZoneDelegate.invokeTask (/usr/src/app/dist/server/main.js:1:6693846)
    at Object.onInvokeTask (/usr/src/app/dist/server/main.js:1:2569069) 

For information : this error does not occur when we test SSR on localhost using the command mentioned in the official documentation : npm run build:ssr && npm run serve:ssr

"@angular/core": "9.0.0",
....
....
"@angular/fire": "5.4.2",
"firebase": "7.8.1",

Hi @jamesdaniels

You said

I’ll want to address for 6.0 stable.

Are you able to give us an approximate date on when the 6.0 stable will be live? is it few days or weeks?

Based on your answer, we will do or not a rollback to Angular 8 because it does not seem we can do SSR with Angular 9 and Firestore.

[hiepxanh]

@vroussel35 I suggest you rollback to angular 8 since he will be busy to update manything. everything will be alright after I test his new update

[jamesdaniels]

I am aiming to achieve success bundling us with Angular 9 SSR within a week. Depending on the day of the week I get it merged, other issues in the meantime, or how big that particular change is I may decide to cut another RC before 6.0 drops on @latest.