Firebase firestore not working with Angular universal

Question

I'm trying with Server Side Rendering on Angular follow the instruction from https://angular.io/guide/universal.

At step 5, when trying to run npm run build:ssr && npm run serve:ssr i got the error like this:

TypeError: Cannot read property 'stringify' of undefined
at Object.<anonymous> (/.../dist/server.js:162338:308)
at __webpack_require__ (/.../dist/server.js:20:30)

After taking a look on that line, i found it came from:

node_modules/@firebase/webchannel-wrapper/dist -> index.js and index.esm.js
node_modules/firebase/firebase-firestore.js.map

I tried with both firebase 5.6.0 and the latest version 5.7.2 but still got same error.

Here is some more info about my project: angular 6, firebase 5.6.0, angular cli 6.1.0

Did you got into the same issues or have any suggestion to solve this please?

Update - After trying to remove firebase from my project, it can be built and it works properly.

Did you check the code where you apply stringify function ? Error is showing in server.js file — DAN
It's not from my code, as i mentioned above it's from firebase. (or i might wrong but i can make sure that it not from my code) — Lạng Hoàng
Error says about stringify of undefined . That means some json data is expected before stringify. Please check your code. Or check is there any api error on console. Not Sure — DAN
@DAN as my question, it was in firebase library, after removing firebase from my project it works :|. — Lạng Hoàng

Lạng Hoàng Lạng Hoàng · Accepted Answer · 2019-01-22T02:33:21

For who got into the same issue like this, please take a look on this link for a detail answer.

Basically, the instruction in this link seems not updated, because the code in the provided repo is quite diffirent and more important that it works even with firestore.

I did clone the repo and then tried to add firestore on it and everything just worked properly. So, now you have two choices: go with the instruction and apply the fix from @Feiyang1 on the given link above OR just clone the repo and checkout the way they implement SSR.

Firebase firestore not working with Angular universal

1 Answers