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.

[vroussel35]

Thanks @hiepxanh and @jamesdaniels for your quick replies - we will do our rollback to Angular 8, waiting for the 6.0 stable.

Thanks for all the great work you do !

[rubenheymans]

any update on a working ssr with the latest version and angular 9 ivy?

[jamesdaniels]

After much suffering I've managed to get this working!

I have a couple more things to clean up and will be cutting a new RC shortly. I had to add @firebase/firestore to externalDependencies and make some other baffling changes... honestly I'm not 100% sure how this is working but I'm going to roll with it.

It's very clear that NGCC does not like how Firestore is bundled. I'll grab some time with the JS SDK team when opportune.

[hiepxanh]

Congratulation for your contribution. :D

.. honestly I'm not 100% sure how this is working but I'm going to roll with it.

don't worrry, let's roll out and see how it work. I will test this as soon as you release

[mc-lovin]

Hoping for a quick release 🤞

[tiagorvs]

Hoping for a quick release 🤞

try the canary version for now. npm i -s @angular/fire@canary

[mc-lovin]

@tiagorvs tried still getting the same error. ..

[2020-03-21T14:52:47.053Z]  @firebase/firestore: Firestore (7.11.0): INTERNAL UNHANDLED 

ERROR:  Error: ENOENT: no such file or directory, open 

'.../dist/server/src/protos/google/firestore/v1/firestore.proto'

[mazlano27]

Hoping for a quick release 🤞

try the canary version for now. npm i -s @angular/fire@canary

Getting this error when trying to pre-render with @angular/fire@canary →

Unhandled Promise rejection: Cannot read property 'id' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'id' of undefined

Is pre-rendering with Angular 9 + Firestore possible yet?

[mc-lovin]

Meanwhile managing with the firestore rest API https://firebase.google.com/docs/firestore/use-rest-api

documentation is terrible, but if you have simple use cases, you can save 60kb of bundle size

[vroussel35]

Hi @jamesdaniels - without any pressure, are you able to give us a rough estimate of when @angular/fire v6 should be available ? (we need this input to plan our developments accordingly). Thanks & Stay at home !

[vroussel35]

Hi @jamesdaniels - is everything OK for you? Are you able to give us some news regarding the next release date? Thanks

[rubenheymans]

@google-admin we could use some extra resources here

[hiepxanh]

@vroussel35 https://github.com/angular/angularfire/issues/2267#issuecomment-605211936 In this comment, He said that:

Honestly adjusting to WFH, preparing for ng-conf, and the changes w/re to Google I/O and Cloud Next have ate up a lot of my time lately. Jumping back into Github now & will cut what I hope to be the last RC shortly. Aiming for 6.0 stable next week.

[mazlano27]

After updating to rc.2 → Still getting the following error:

webpack:///./node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js?:18 throw new Error("package.json does not exist at " + package_json_path);

when trying to pre-render routes. Anyone got it working?

Thank you in advance

[jamesdaniels]

You’ll need to add @firebase/firestore to externalDependencies in your angular.json. I’m working on adding that to the schematics before release.

[mazlano27]

@jamesdaniels after adding @firebase/firestore to externalDependencies, i get the following error when compiling for pre-rendering →

ERROR TypeError: app.firestore is not a function

How can I address this?

[jamesdaniels]

@jamesdaniels after adding @firebase/firestore to externalDependencies, i get the following error when compiling for pre-rendering →

ERROR TypeError: app.firestore is not a function

How can I address this?

That should be resolved in rc.2. Which version of Firebase are you using? I have a sample project in the git root which is working as expected.

[mazlano27]

@jamesdaniels after adding @firebase/firestore to externalDependencies, i get the following error when compiling for pre-rendering →

ERROR TypeError: app.firestore is not a function

How can I address this?

That should be resolved in rc.2. Which version of Firebase are you using? I have a sample project in the git root which is working as expected.

Currently using Firebase version 7.13.1

"dependencies": { "@angular/animations": "~9.1.0", "@angular/cdk": "^9.2.0", "@angular/common": "~9.1.0", "@angular/compiler": "~9.1.0", "@angular/core": "~9.1.0", "@angular/fire": "^6.0.0-rc.2", "@angular/forms": "~9.1.0", "@angular/material": "^9.2.0", "@angular/platform-browser": "~9.1.0", "@angular/platform-browser-dynamic": "~9.1.0", "@angular/platform-server": "~9.1.0", "@angular/router": "~9.1.0", "@nguniversal/aspnetcore-engine": "^9.1.0", "@nguniversal/module-map-ngfactory-loader": "^8.2.6", "core-js": "^3.6.4", "firebase": "^7.13.1", "rxjs": "~6.5.4", "tslib": "^1.11.1", "zone.js": "^0.10.3" }

[mazlano27]

@jamesdaniels I reviewed the sample project in the git root and downgraded the firebase version in my app to 7.8.0 and SSR is working once again!

Thank you for your guidance

[jamesdaniels]

@mazlano27 you need to polyfill WS and XMLHttpRequest as they are not available in Node. https://github.com/angular/angularfire/blob/master/sample/server.ts#L11 I've tested against the xhr2 and ws Node packages.

[dannymorales]

Hi everyone,

Do you have a solution for this? I have tried everything posted here and I still cannot make this work. I originally get this message: Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto, then if i add @firebase/firestore to externalDependencies, when I try to deploy in firebase, I get a function error: Detailed stack trace: Error: Cannot find module '@firebase/firestore'. Everything works fine until I use firestore in the app.

[ribalnasr]

how come this issue is closed when it's still not working with 6.0.0 ??

[FredvanRijswijk]

This error is still here, i tried almost everything, but cannot fix it.

"dependencies": {
    "@angular/animations": "~9.1.3",
    "@angular/cdk": "^9.2.1",
    "@angular/common": "~9.1.3",
    "@angular/compiler": "~9.1.3",
    "@angular/core": "~9.1.3",
    "@angular/fire": "^6.0.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.1.3",
    "@angular/material": "^9.2.1",
    "@angular/platform-browser": "~9.1.3",
    "@angular/platform-browser-dynamic": "~9.1.3",
    "@angular/platform-server": "~9.1.3",
    "@angular/router": "~9.1.3",
    "@nestjs/common": "^7.0.9",
    "@nestjs/core": "^7.0.9",
    "@nestjs/ng-universal": "^3.1.0",
    "@nestjs/platform-express": "^7.0.9",
    "@nguniversal/express-engine": "^9.1.0",
    "class-transformer": "^0.2.3",
    "class-validator": "^0.9.1",
    "express": "^4.15.2",
    "firebase": "^7.14.2",
    "first-input-delay": "^0.1.3",
    "ngx-seo": "^3.4.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.3"
  },

This error inject()

ERROR { Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
    at injectInjectorOnly (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1026:19)
    at Object.ɵɵinject (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1037:61)
    at Object.AngularFirestore_Factory [as factory] (/Users/****/Projects/****/web/bo-web/node_modules/@angular/fire/bundles/angular-fire-firestore.umd.js:1334:173)
    at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.hydrate (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68580:39)
    at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68397:37)
    at NgModuleRef$1../node_modules/@angular/core/bundles/core.umd.js.NgModuleRef$1.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:81882:37)
    at Object.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:80116:39)
    at getOrCreateInjectable (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:60779:43)
    at Object.ɵɵdirectiveInject (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:71304:16)
    at NodeInjectorFactory.AanmeldenComponent_Factory [as factory] (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:265191:112)
    at resolvePromise (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262973:39)
    at resolvePromise (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262925:21)
    at /Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:263035:21
    at ZoneDelegate../node_modules/zone.js/dist/zone-node.js.ZoneDelegate.invokeTask (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262562:35)
    at Object.onInvokeTask (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:85158:37)
    at ZoneDelegate../node_modules/zone.js/dist/zone-node.js.ZoneDelegate.invokeTask (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262561:40)
    at Zone../node_modules/zone.js/dist/zone-node.js.Zone.runTask (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262329:51)
    at drainMicroTaskQueue (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262742:39)
    at ./node_modules/zone.js/dist/zone-node.js.ZoneTask.invokeTask (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262648:25)
    at Server.ZoneTask.invoke (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:262633:52)
  rejection:
   Error: inject() must be called from an injection context
       at injectInjectorOnly (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1026:19)
       at Object.ɵɵinject (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1037:61)
       at Object.AngularFirestore_Factory [as factory] (/Users/****/Projects/****/web/bo-web/node_modules/@angular/fire/bundles/angular-fire-firestore.umd.js:1334:173)
       at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.hydrate (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68580:39)
       at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68397:37)
       at NgModuleRef$1../node_modules/@angular/core/bundles/core.umd.js.NgModuleRef$1.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:81882:37)
       at Object.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:80116:39)
       at getOrCreateInjectable (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:60779:43)
       at Object.ɵɵdirectiveInject (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:71304:16)
       at NodeInjectorFactory.AanmeldenComponent_Factory [as factory] (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:265191:112),
  promise:
   ZoneAwarePromise [Promise] {
     __zone_symbol__state: 0,
     __zone_symbol__value:
      Error: inject() must be called from an injection context
          at injectInjectorOnly (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1026:19)
          at Object.ɵɵinject (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1037:61)
          at Object.AngularFirestore_Factory [as factory] (/Users/****/Projects/****/web/bo-web/node_modules/@angular/fire/bundles/angular-fire-firestore.umd.js:1334:173)
          at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.hydrate (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68580:39)
          at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68397:37)
          at NgModuleRef$1../node_modules/@angular/core/bundles/core.umd.js.NgModuleRef$1.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:81882:37)
          at Object.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:80116:39)
          at getOrCreateInjectable (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:60779:43)
          at Object.ɵɵdirectiveInject (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:71304:16)
          at NodeInjectorFactory.AanmeldenComponent_Factory [as factory] (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:265191:112) },
  zone:
   Zone {
     _parent:
      Zone {
        _parent: null,
        _name: '<root>',
        _properties: {},
        _zoneDelegate: [ZoneDelegate] },
     _name: 'angular',
     _properties: { isAngularZone: true, maybeDelayChangeDetection: false },
     _zoneDelegate:
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [ZoneDelegate],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: null,
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: null,
        _invokeZS: [Object],
        _invokeDlgt: [ZoneDelegate],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [ZoneDelegate],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [ZoneDelegate],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [ZoneDelegate],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [ZoneDelegate],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [ZoneDelegate],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task:
   ZoneTask {
     _zone:
      Zone {
        _parent: [Zone],
        _name: 'angular',
        _properties: [Object],
        _zoneDelegate: [ZoneDelegate] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',

 data:
      ZoneAwarePromise [Promise] {
        __zone_symbol__state: 0,
        __zone_symbol__value:
         Error: inject() must be called from an injection context
             at injectInjectorOnly (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1026:19)
             at Object.ɵɵinject (/Users/****/Projects/****/web/bo-web/node_modules/@angular/core/bundles/core.umd.js:1037:61)
             at Object.AngularFirestore_Factory [as factory] (/Users/****/Projects/****/web/bo-web/node_modules/@angular/fire/bundles/angular-fire-firestore.umd.js:1334:173)
             at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.hydrate (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68580:39)
             at R3Injector../node_modules/@angular/core/bundles/core.umd.js.R3Injector.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:68397:37)
             at NgModuleRef$1../node_modules/@angular/core/bundles/core.umd.js.NgModuleRef$1.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:81882:37)
             at Object.get (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:80116:39)
             at getOrCreateInjectable (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:60779:43)
             at Object.ɵɵdirectiveInject (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:71304:16)
             at NodeInjectorFactory.AanmeldenComponent_Factory [as factory] (/Users/****/Projects/****/web/bo-web/dist/bo-web/server/main.js:265191:112) },
     scheduleFn: undefined,
     cancelFn: undefined,
     callback: [Function],
     invoke: [Function] } }

[rubenheymans]

a quick suggestion just to be sure, delete your node_modules folder, rm -rf nodes_modules and run npm i again

[dannymorales]

Hi Ruben Heymans,

I tried that several times and still does not work.

[fayeyen]

Please suggest which firebase version match the Angular 9 , good in SSR, I have problem with this any try many days can't figure it out. I also use google map api and geofirex, stuck in serve:ssr. Any help. here's my version "@angular/core": "~9.1.3", "@angular/fire": "^6.0.0", "firebase": "^7.14.2", "geofirex": "^0.1.0",

I used ng add @nestjs/ng-universal and npm run build:ssr without error , but when npm run serve:ssr error Error enabling offline persistence. Falling back to persistence disabled: Error: ENOENT: no such file or directory, open 'C:\myprojects\myproject9\dist\myproject9\server\src\protos\google\firestore\v1\firestore.proto' If roll back work, I would rather roll back , pls suggest which version, should I install. pls help..........help.....help.....I am stuckkk....

[jdgamble555]

Please suggest which firebase version match the Angular 9 , good in SSR, I have problem with this any try many days can figure it out. I also use google map api and geofirex, stuck in serve:ssr. Any help. here's my version "@angular/core": "~9.1.3", "@angular/fire": "^6.0.0", "firebase": "^7.14.2", "geofirex": "^0.1.0",

I used ng add @nestjs/ng-universal and npm run build:ssr without error , but when npm run serve:ssr error Error enabling offline persistence. Falling back to persistence disabled: Error: ENOENT: no such file or directory, open 'C:\myprojects\myproject9\dist\myproject9\server\src\protos\google\firestore\v1\firestore.proto' If roll back work, I would rather roll back , pls suggest which version, should I install. pls help..........help.....help.....I am stuckkk....

Add @firebase/firestore to "package.json".dependencies

[fayeyen]

Please suggest which firebase version match the Angular 9 , good in SSR, I have problem with this any try many days can't figure it out. I also use google map api and geofirex, stuck in serve:ssr. Any help. here's my version "@angular/core": "~9.1.3", "@angular/fire": "^6.0.0", "firebase": "^7.14.2", "geofirex": "^0.1.0",

I used ng add @nestjs/ng-universal and npm run build:ssr without error , but when npm run serve:ssr error Error enabling offline persistence. Falling back to persistence disabled: Error: ENOENT: no such file or directory, open 'C:\myprojects\myproject9\dist\myproject9\server\src\protos\google\firestore\v1\firestore.proto' If roll back work, I would rather roll back , pls suggest which version, should I install. pls help..........help.....help.....I am stuckkk....

after I added @firebase/firestore to "package.json".dependencies still got the error my debug.log as follow 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'C:\Program Files\nodejs\node.exe', 1 verbose cli 'C:\Users\faye_\AppData\Roaming\npm\nodemodules\npm\bin\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'serve:ssr' 1 verbose cli ] 2 info using npm@6.13.6 3 info using node@v12.14.1 4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ] 5 info lifecycle myproject9@0.0.0~preserve:ssr: myproject9@0.0.0 6 info lifecycle myproject9@0.0.0~serve:ssr: myproject9@0.0.0 7 verbose lifecycle myproject9@0.0.0~serve:ssr: unsafe-perm in lifecycle true 8 verbose lifecycle myproject9@0.0.0~serve:ssr: PATH: C:\Users\faye\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\myprojects\myproject9\nodemodules.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Yarn\bin\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\Common Files\Autodesk Shared\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\nodejs\;C:\Program Files\Microsoft VS Code\bin;C:\Users\faye\AppData\Local\Microsoft\WindowsApps;C:\Users\faye\AppData\Roaming\npm; 9 verbose lifecycle myproject9@0.0.0~serve:ssr: CWD: C:\myprojects\myproject9 10 silly lifecycle myproject9@0.0.0~serve:ssr: Args: [ '/d /s /c', 'node dist/myproject9/server/main.js' ] 11 silly lifecycle myproject9@0.0.0~serve:ssr: Returned: code: 3221225725 signal: null 12 info lifecycle myproject9@0.0.0~serve:ssr: Failed to exec serve:ssr script 13 verbose stack Error: myproject9@0.0.0 serve:ssr: node dist/myproject9/server/main.js 13 verbose stack Exit status 3221225725 13 verbose stack at EventEmitter. (C:\Users\faye\AppData\Roaming\npm\node_modules\npm\nodemodules\npm-lifecycle\index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:223:5) 13 verbose stack at ChildProcess. (C:\Users\faye\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:223:5) 13 verbose stack at maybeClose (internal/child_process.js:1021:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5) 14 verbose pkgid myproject9@0.0.0 15 verbose cwd C:\myprojects\myproject9 16 verbose WindowsNT 10.0.18362 17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\faye\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "serve:ssr" 18 verbose node v12.14.1 19 verbose npm v6.13.6 20 error code ELIFECYCLE 21 error errno 3221225725 22 error myproject9@0.0.0 serve:ssr: node dist/myproject9/server/main.js 22 error Exit status 3221225725 23 error Failed at the myproject9@0.0.0 serve:ssr script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 3221225725, true ]

[hiepxanh]

@fayeyen they close my issues, so I close my PR https://github.com/angular/angularfire/pull/2372 little dissappoint but here is the solution:

SOLUTION:

Description update for angular 9.0 match with https://angular.io/guide/universal

Code sample example repository here https://github.com/hiepxanh/angular-fire-universal

SNIPPET:

1. Edit file

Insert polyfills at the top of file

// server.ts
...
// Polyfills required for Firebase
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
...

// angular.json
// projects.web.architect
...
 "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            ...
            "externalDependencies": [
              "@firebase/firestore"
            ]
            ...
          }

...

2. Setup Firebase detail

• follow this guilde https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

3. Running

npm run dev:ssr

[NaqeebZareen]

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)

[fayeyen]

@hiepxanh thank you! I'm trying your git version, is it an empty project which work on SSR?

[fayeyen]

Thank you for help, the seed seem's fine. But when I added the auth and storage module in app.module.ts AngularFireAuthModule, AngularFireStorageModule,

it came out with error

[fayeyen]

Thank you! It works! by upgrade the firebase version "firebase": "^7.14.2" Appreciated!

[hiepxanh]

@fayeyen thank you. You're welcome. Please share your solution, so other people can get help from your answer

[addsmoll]

@FredvanRijswijk Root route resolvers easily break the entire server.

[mazlano27]

@mazlano27 you need to polyfill WS and XMLHttpRequest as they are not available in Node. https://github.com/angular/angularfire/blob/master/sample/server.ts#L11 I've tested against the xhr2 and ws Node packages.

Hey @James,

I've gone back and tried to update the firebase package to 7.15.1 and the error "app.firestore is not a function" still persists. As before, falling back to 7.8.0 fixes the issue. What update can we make to have pre-rendering working for newer firebase versions? Thank you

[vroussel35]

Hi everyone,

We want to start the migration to Angular 9 for our platform which is using SSR + Angularfire.

Simple question : Is "Angular 9 + SSR + Angularfire" working?

Looking at all the comments above, I'm not sure if this setup is working for anyone. Would be great to know before starting spending time and money on this migration.

Thanks.