angular / angular/angularfire

Document from Firestore only appears on first render with Angular Universal (SSR)

Open
#3,323 8 comments 4 reactions 1 assignee Claimed by @davideast View on GitHub
Dominant language
TypeScript
Stars
7.8k
Forks
2.2k
Avg merge
22h 28m
Merged PRs (30d)
6

Description

### Version info

**Angular:**
15.2.0

**Firebase:**
9.8.0 (or whatever AngularFire pulls in...)

**AngularFire:**
7.5.0

**Other (e.g. Ionic/Cordova, Node, browser, operating system):**
Node: 16.19.1
Browser: Chromium 111.0.5563.64
OS: Pop!_OS Linux

### How to reproduce these conditions

**Failing test unit, Stackblitz demonstrating the problem**
(follow steps below)

**Steps to set up and reproduce**

1. Create a Firestore collection (e.g. 'examples') with a document containing some data.
2. `ng new ssr-test --routing=true --style=scss`
3. `cd ssr-test`
4. `ng generate environments`
5. `ng add @nguniversal/express-engine`
6. `ng add @angular/fire` (hook it up with Firestore from step 1)
7. Replace `app.component.ts` with the following (`path` in `ngOnInit` refers to step 1):
```
import { Component, OnInit } from '@angular/core';
import { doc, docData, Firestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
selector: 'app-root',
template: '

{{ data$ | async | json }}
'
})
export class AppComponent implements OnInit {

data$: Observable | null = null;

constructor(private firestore: Firestore) {
}

ngOnInit() {

const path = '/examples/GscrMmeBDasN6llxVybm'
const ref = doc(this.firestore, path);
this.data$ = docData(ref);
}
}
```
8. npm run build:ssr && npm run serve:ssr
9. open http://localhost:4000 and view page source
10. refresh page source

**Sample data and security rules**
N/A

### Debug output

** Errors in the JavaScript console **
N/A

** Output from `firebase.database().enableLogging(true);` **
N/A

** Screenshots **
N/A

### Expected behavior

Content of document from Firestore should appear on first view of source page and on every subsequent refresh.

### Actual behavior

Content of document from Firestore appears on first view of source page, then on subsequent refreshes is appears as `null`.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.