Angularfire: Angular Universal Prerender with simple RTDB query never finishes loading

[MvRemmerden]

When running npm run prerender, the script never finishes loading when trying to prerender a route that has a simple query. Example from my project:

ngOnInit() {
    this.afdb.list(path, ref => ref.orderByChild('username').equalTo(username)).query.once('value').then(result => {
        console.log(result);
    });
}

The output in the terminal stays at "Prerendering 1 routes to ...". However, when I manually stop the script, the file in dist/project/browser will still be rendered correctly, which makes it seem like Universal is waiting for a subscription.

Angular: 11.0.2

Firebase: 8.1.1

AngularFire: 6.1.2

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

Debug output

* Errors in the JavaScript console *

* Output from firebase.database().enableLogging(true); *

* Screenshots *

Expected behavior

Actual behavior

[jamesdaniels]

Most likely the Firebase JS SDK is setting up side-effects, a socket or a timer in a weird place, outside of where I am running zone.runOutsideAngular(() => ...). Previously in v8 they surprised me by setting up a timer when the reference is first constructed... I imagine there are other places. I'll dig in at some point.

[MvRemmerden]

@jamesdaniels That would be awesome! Let me know if you need me to test anything, or if I can be helpful in any other way! 🙂

[jamesdaniels]

Oh I just noticed that you're breaking into the vanilla JS SDK, where I can't promise Zone stability ATM, can you get it to work with the following?

this.afdb.list(path, ref => ref.orderByChild('username').equalTo(username)).valueChanges().pipe(take(1)).subscribe(result => {
        console.log(result);
});

[MvRemmerden]

Had to use .snapshotChanges() because I needed the key, but it did work, thanks for looking into it! Might be worth to collect these caveats that could get people stuck when trying to run ssr/prerender with Ivy.

[jamesdaniels]

Ah glad that worked. valueChanges({ idField: 'id' }) will give add the key an easier API to work with.

I actually have an upcoming API that will add some level of Zone stability to those APIs but it requires the newer version of Typescript to type... so it's something I have to think about.

At the very least I should start a "FAQ"-ish doc on Zone stuff.

[MvRemmerden]

Doesn't valueChanges({ idField: 'id' }) only work in Firestore? I'm getting this error when trying to use it for the RTDB query:

[jamesdaniels]

Ah I thought someone added it to the database calls in the last batch of PRs but I must be misremembering.