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.

Answer 1

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.