Firebase-js-sdk: Error Angular Universal running serve:ssr

[jlmonteagudo]

[REQUIRED] Describe your environment

• Operating System version: Windows 10
• Firebase SDK version: 6.3.1
• Firebase Product: database
• Angular version: 8.1.2

[REQUIRED] Describe the problem

I've added firebase on a new Angular project and it works fine when I run ng serve. I can build the project for SSR without problem running the command npm run build:ssr. But when I run npm run serve:ssr I get the following error:

[email protected] serve:ssr C:\Develop\js\projects\myapp
node dist/server

C:\Develop\js\projects\myapp\dist\server\main.js:126258
        throw new Error("package.json does not exist at " + package_json_path);
        ^

Error: package.json does not exist at C:\Develop\js\projects\myapp\dist\package.json
    at Object.PsoT.exports.find (C:\Develop\js\projects\myapp\dist\server\main.js:126258:15)
    at Object.wPNL (C:\Develop\js\projects\myapp\dist\server\main.js:176077:12)
    at __webpack_require__ (C:\Develop\js\projects\myapp\dist\server\main.js:20:30)
    at Object.XpdW (C:\Develop\js\projects\myapp\dist\server\main.js:142482:12)
    at __webpack_require__ (C:\Develop\js\projects\myapp\dist\server\main.js:20:30)
    at Object.g1pB (C:\Develop\js\projects\myapp\dist\server\main.js:165365:27)
    at __webpack_require__ (C:\Develop\js\projects\myapp\dist\server\main.js:20:30)
    at Object.Ou8q (C:\Develop\js\projects\myapp\dist\server\main.js:123737:14)
    at __webpack_require__ (C:\Develop\js\projects\myapp\dist\server\main.js:20:30)
    at Object.BYZf (C:\Develop\js\projects\myapp\dist\server\main.js:89971:12)

Steps to reproduce:

• Create a new Angular app
• Install firebase: npm install firebase --save
• Use firebase in the default AppComponent (like in the following section)
• Install nguniversal: ng add @nguniversal/express-engine --clientProject myapp
• Build the project for ssr: npm run build:ssr
• Run the project with ssr: run serve:ssr

Relevant Code:

export class AppComponent {

  constructor() {

    const app = firebase.initializeApp(environment.firebase);
    const db = firebase.firestore(app);

    db.collection('articles').get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
          console.log(`${doc.id} => ${doc.data()}`);
      });
    });
  }
}

[puchesjr]

I have found that the firebase-js-sdk cannot be used with any/many ssr enabled frameworks. We have attempted to use it with Angular, Nextjs, and Fusion.js.
> Build error occurred { Error: Failed to load C:\Users\jrodk\Projects\joyride\node_modules\grpc\src\node\extension_binary\node-v64-win32-x64-unknown\grpc_node.node. Module did not self-register. at Object.Module._extensions..node (internal/modules/cjs/loader.js:805:18) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (C:\Users\jrodk\Projects\joyride\node_modules\grpc\src\grpc_extension.js:32:13) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) type: 'Error', '$error': '$error' }

[Feiyang1]

@jlmonteagudo The error doesn't seem to come from firebase. The problem is that some code is looking for C:\Develop\js\projects\myapp\dist\package.json, but it doesn't exist.

@puchesjr Firebase js sdk works with Angular (with SSR), though you might need to do some configuration depending on which firebase products are used. Many people are using Firebase with Angular SSR successfully today. Can you please open a new issue with your specific issue so we can track it and help other people with the similar issue?

[jlmonteagudo]

Hello @Feiyang1

Thank you for your interest. I already tried to copy package.json to that folder but I started to get new errors, so I couldn't solve the problem.

I'm sure that there are a lot of projects working with Firebase and SSR, but I think that the last version of Angular and the last version of Firebase JS SDK are not working properly with SSR.

In my previous message I wrote the steps to reproduce the problem, and as you can see, by default SSR is not working.

[Feiyang1]

I tried it (Angular SSR with Firebase) in a testing project, and it worked for me.
Are you able to create a minimal repro and upload it to a github repo, so I can take a look?

[jlmonteagudo]

Thank you very much for your help @Feiyang1

I have created the following repository: https://github.com/jlmonteagudo/angular-ssr

I simply have followed the steps of my first message, and sadly it doesn't work for me.

I usually work with the library angularfire2, and it was also failing, so, trying to find the problem, I deciced to test directly with Firebase JS SDK.

[Feiyang1]

Thanks for the repro! I'm able to reproduce the issue with it.
The problem is gRPC which is a dependency of Firestore should not be bundled. Detailed discussion/explanation can be found here.

To exclude gPRC from bundling, You can remove --bundleDependencies all from build:client-and-server-bundles command in package.json, so it becomes "build:client-and-server-bundles": "ng build --prod && ng run angular-ssr:server:production".
It will exclude all external dependencies including gRPC from the SSR bundle and will get them in runtime using require().

If somehow you only want to exclude some external dependencies, you can take a look at the solution I posted in another thread.

[nseverini]

@Feiyang1 Hi. I am having the same issue and I changed the "build:client-and-server-bundles" command like you said but then when I try to rendering the app using npm run build:ssr && npm run serve:ssr if I go to localhost:4000 it keeps loading for a long time until it returns me an empty page with an error that saids "This page doesnt work".

[jlmonteagudo]

Thank you very much @Feiyang1

Now I don't receive any error.

However, the content retrieved from Firebase is not being rendered in the server. In my web page, the final result is this:

PLACES

• Valencia
• Madrid
• Barcelona

But if I inspect the source code of the page, I get this:

<app-root _nghost-sc0="" ng-version="8.1.3"><h2 _ngcontent-sc0="">PLACES</h2><!----></app-root>
As you can see, the information retrieved from Firebase is not being rendered in the server.

In any case, I have used an alternative solution for my real app. I'm working with the Firebase REST API (with Firebase Real Time Database, because the JSON result of Firestore REST API is a bit weird for me). If I want to convert my app to a PWA, I think is more natural working with an REST API than with the Firebase SDK.

Thank you for your help @Feiyang1

[Feiyang1]

@jlmonteagudo You're welcome! Glad you found a solution that works for you.
Out of curiosity - Are you using plain Firebase SDK for testing SSR? I'm not an expert on Angular, but I suspect it's a Zone issue. @jamesdaniels told me sometimes ago that the plain Firebase SDK's async callbacks are not in the Zone (so SSR doesn't wait for it) and he has to do works in AngularFire to make them in the Zone. If you know the answer offhand or you have time to test, Does it also not work using AngularFire?

@nseverini We can't help you without any information. If you have any log trace, please open a new issue with that.

[jlmonteagudo]

Hello @Feiyang1

I'have tested it without async/await and it's not being rendered in the server. This is the code:

  ngOnInit() {
    const app = firebase.initializeApp(environment.firebase);
    const db = firebase.firestore(app);
    db.collection('places').get()
      .then(snap => {
        this.places = snap.docs.map(doc => doc.data());
      });
  }

I have also tested it with AngularFire and it's being rendered properly in the server. This is what I get from the server:

<app-root _nghost-sc0="" ng-version="8.1.3"><h2 _ngcontent-sc0="">PLACES</h2><!----><ul _ngcontent-sc0=""><!----><li _ngcontent-sc0="">Madrid</li><li _ngcontent-sc0="">Barcelona</li><li _ngcontent-sc0="">Valencia</li></ul></app-root>

Usually I work with AngularFire, but as I was facing problems then I decided to test only with Firebase JS SDK.

Thank you very much for your help @Feiyang1 !!