Angular 11 Firebase Server-side rendering infinite loading / pending

[Judp0m]

Angular: 11

Firebase: 8.2.1

AngularFire: 6.1.4

How to reproduce these conditions

This works as expected in NON-SSR mode, to query once a given collection:

this.firestore.collection<T>('collection', ref => ref.limit(5))
    .get()
    .pipe(
      map((qs: firebase.firestore.QuerySnapshot) => qs.empty ? [] : qs.docs.map(d => d.data() as T)),
    );

When switching to SSR, the above code leads to the express server hanging, and the client see a 'pending' query that never completes, or hits a timeout and leaves the page partially rendered (i.e. without the results of that query).

This is the best workaround I found:

this.firestore.collection<T>('collection', ref => ref.limit(5))
    .valueChanges()   <<<<
    .pipe(
      take(2),        <<<<
    );

Though this more sane workaround also fails:

this.firestore.collection<T>('collection', ref => ref.limit(5))
    .valueChanges()
    .pipe(
      take(1),      <<<<
    );

More details about exact version used here:
https://stackoverflow.com/questions/65388261/angular-11-firebase-server-side-rendering-infinite-loading-pending/65388376#65388376

Expected behavior

The first version should work without the workaround, without and with SSR.

Actual behavior

Without the workaround, the express server hangs indefinitely.

Related issues:
firebase/firebase-js-sdk#3541
firebase/firebase-js-sdk#3542
angular/universal#1711

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[Marcusg62]

Seems to be related to #2695

[inorganik]

I can confirm the same behavior as @Judp0m, but only on afs.collection() and afs collectionGroup() calls. Somehow afs.doc() works fine. @jamesdaniels perhaps you fixed the issue only for doc() calls?

Here is a repo that reproduces the issue, with the latest everything at time of writing:

• Angular 11.0.5
• Angularfire 6.1.4
• Firebase 8.2.1

Instructions to reproduce. From master:

$ npm i
$ npm run dev:ssr

From localhost, navigate to the collection group or collection route via the links. Notice the terminal will log data retrieved from firestore, but the page never finishes loading.

If you navigate to the doc route, it works fine.

There are 2 workarounds I've found for making collection and collectionGroup calls work:

• pipe take(2) (it has to be 2, not 1) as @Judp0m suggested
• don't pipe at all. Checkout the branch working-without-pipe to see this way

There is also a third branch, resolver which uses a promise inside a resolver for a collection call, but this also hangs.

As a side note I have not been able to get firebase serve to render any routes serverside (even ones without firestore), it just hangs until it times out after a minute. At best it just serves the static index.html file. I would love to see an angular 10/11 example of this that works.

[inorganik]

Related to getting firebase serve to work, I was able to at least get it to stop hanging by making the change below,

export const universal = functions.https.onRequest((request, response) => {
  require(`${process.cwd()}/dist/podcasts11/server/main`).app(request, response);
});

to this:

const ssr = require(path.resolve(__dirname, '../dist/podcasts11/server/main')).app();
export const universal = functions.https.onRequest(ssr);

But it still does not render server-side.

[inorganik]

The hanging issue seems to be cleared up, thanks to removing "@firebase/app" from external dependencies:

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/podcasts11/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "externalDependencies": [
              "@firebase/firestore"
            ]
          },

however with this change the pages are not getting rendered server side.

[blasco]

Suffering with this since months...

[SirBr4him]

Related to getting firebase serve to work, I was able to at least get it to stop hanging by making the change below,

export const universal = functions.https.onRequest((request, response) => {
  require(`${process.cwd()}/dist/podcasts11/server/main`).app(request, response);
});

to this:

const ssr = require(path.resolve(__dirname, '../dist/podcasts11/server/main')).app();
export const universal = functions.https.onRequest(ssr);

But it still does not render server-side.

I think that you have to move angular compiled dist inside your functions folder. and deploy all as a function project.

for example:
in functions tsconfig.json change da "outDir" from "lib" to "dist"
change your ssr function to

`
import * as functions from 'firebase-functions';
const expressApp = require('./podcasts11/server/main').app();

export const server = functions
.region('us-central1')
.runWith({ timeoutSeconds: 60, memory: '1GB' })
.https.onRequest(expressApp);

`

Move your angular compiled app folder "dist/podcasts11" inside "functions/dist"
and your firebase public folder should be "public": "functions/dist/podcasts11/browser",

then you can deploy and it will works.

I had this issue months ago and i resolved doing this changes.

[inorganik]

@SirBr4him Yes, you have to copy your dist to functions/dist, that is well documented

[inorganik]

I honestly don't know what singular thing I did to get it to work, as I've been hammering at this for weeks, but I got everything working without any weird tricks. Here is the repo: https://github.com/inorganik/podcasts

It has routes that test getting data in various ways:

• doc
• collection
• collectionGroup
• resolver
• transfer state

My testing process was:

1. npm run build:ssr
2. firebase serve

[rebeb74]

@inorganik I have the same problem for RTDB and Firestore (I tried both). But i have found that if i attach an authGuard to the route, it works fine. In my case for my admin panel with auth it works, but for my several other pages without authGuard, it's not working.
Here is my AuthGuard, maybe it can gives an idea to solve this problem ?

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.authState()
      .pipe(
        map((isAuth) => {
          if (isAuth) {
            return true;
          } else {
            this.router.navigate(['/login']);
            return false;
          }
        })
      )
  }

[neostalgic]

Just to bump this topic, I'm experiencing similar issues. I've read through all of these threads and tried nearly all of the workarounds suggested. None of them seem to work. I've been struggling with this for a couple of weeks.

In my use-case I'm using a resolver to fetch data from firebase before a page load. I've noticed very inconsistent results. Occasionally it'll start working locally - but then the deployed version won't work.

What's interesting is the routes don't hang if I load into the app and then navigate to them; as opposed to linking to them directly. Another thing, it seems like at times the first request to the page I'm attempting to load will work, but then all subsequent requests will fail until I clear my browser cache and try again. Very odd behavior.

Things I've tried:

• Running firebase queries outside of Angular
• Downgrading angularfire/firebase
• Loading page content in ngOnInit instead of a resolver
• Removing all pipes
• Using snapshotChanges/valuesChanges
• Adding my own AuthGuard and attaching them to the failing routes.

I'm pretty well stuck here. This is pretty frustrating, as I'm maintaining a user-facing app.

If it helps, this is the error I'm seeing in my deployed environment:
Timed out while waiting on cache-bos4679-BOS

[Teebo]

Hi @deadlymustard are you still having this issue?

[blasco]

@deadlymustard same situation here... I can get it to work (it requires for some unknown reason reloading the page twice, after that it works normal for future request) using this:

For documents:

      doc = (await this.afStore.firestore.doc(path).get()).data();

For collections:

      const docs = (await this.afStore.firestore.collection(path)).get()).docs;

So basically not using angular fire, it still doesn't work perfect, but I can keep the app online while looking for a solution. I'm so sick of this issue I've started migrating to nextjs... but I would rather not have to.

[Teebo]

Its quite a bummer; I am having a challenge when the app is deployed to firebase, it works with ng deploy --preview but fails to work on the deployed version when a router resolver is used;
I solved my initial issue by using NgZone and running the code that makes the firestore query outside Angular but this change does not work on firebase

[Idrimi]

Ran into the same issue. SSR function Timeout on some routes in cloud functions. All pages that triggered a function with a .take(1) operator caused the issue. Changing it to .take(2) solved the problem. Not sure if this should be considered a bug or expected behavior. My thesis: The observable is triggered twice. Once from the SSR, once CSR. Does this make sense?

🚨This doesn't work:

getProduct(id: string): Observable<Product> {
    const collection = this.afs.collection<Product>("Products");    
    return collection.doc<Product>(id).valueChanges().pipe(
      take(1),
      map(product => {
        product.id = id;
        return product;
      })
    );
  }

🥦This works:

getProduct(id: string): Observable<Product> {
    const collection = this.afs.collection<Product>("Products");    
    return collection.doc<Product>(id).valueChanges().pipe(
      take(2),
      map(product => {
        product.id = id;
        return product;
      })
    );
  }