AngularFireStore breaks SSR, does not render web page

[tskweres]

Test Repo here, simply clone it, npm install, and npm run dev:ssr

https://github.com/tskweres/angularfire-ssr-test

** make sure to input your own firebaseConfig in the environments

In the app.component.ts, you'll see that I inject AngularFireStore, and then make a query on a collection.

The query completes and the console logs the result, but when launching the browser in chrome, the web page never renders.

If I do not make the this.db.collection('.....') call, the web page renders.

Any ideas?

[tskweres]

It's almost as if AngularFire makes the query call, but it doesn't fire next() or some sort of interceptor issue? Ultimately the html doesn't get rendered to Chrome, but there's no error

[jamesdaniels]

That sounds like a Zone.js issue. Note your on RC, give 6.0.0 final a shot. In the meantime I'll look at your repo, looping back to wrapping 6.0.1 shortly in which I'm aiming to button up a lot of these issues.

[tskweres]

@jamesdaniels Cool I appreciate it. I've tried with 6.0.0.rc-2 and 6.0.0, same issue. You can check the repo, but here's my package.json:

{
  "name": "universal-starter-v9",
  "version": "0.1.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/angular/universal-starter.git"
  },
  "contributors": [
    "AngularClass <hello@angularclass.com>",
    "PatrickJS <patrick@angularclass.com>",
    "Jeff Whelpley <jeff@gethuman.com>",
    "Jeff Cross <crossj@google.com>",
    "Mark Pieszak <mpieszak84@gmail.com>",
    "Jason Jean <jasonjean1993@gmail.com>",
    "Fabian Wiles <fabian.wiles@gmail.com>",
    "Kamil Mysliwiec <mail@kamilmysliwiec.com>",
    "Michael Prentice <michael.prentice@devintent.com>"
  ],
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run universal-starter-v9:serve-ssr",
    "serve:ssr": "node dist/universal-starter-v9/server/main.js",
    "prebuild:ssr": "ngcc",
    "build:ssr": "ng build --prod && ng run universal-starter-v9:server:production",
    "prerender": "ng run universal-starter-v9:prerender"
  },
  "pre-commit": [],
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/platform-server": "~9.0.0",
    "@angular/router": "~9.0.0",
    "@nestjs/common": "^6.11.6",
    "@nestjs/core": "^6.11.6",
    "@nestjs/ng-universal": "^3.0.0",
    "@nestjs/platform-express": "^6.11.6",
    "@nguniversal/common": "9.0.0",
    "@nguniversal/express-engine": "9.0.0",
    "class-transformer": "^0.2.3",
    "class-validator": "^0.9.1",
    "classlist.js": "1.1.20150312",
    "core-js": "^2.6.5",
    "firebase": "^7.13.1",
    "rxjs": "~6.5.2",
    "terser": "^4.1.2",
    "tsconfig-paths": "^3.8.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "<0.900 || ^0.900.0-0 || ^9.0.0-0",
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "~9.0.1",
    "@angular/compiler-cli": "~9.0.0",
    "@angular/language-service": "~9.0.0",
    "@grpc/proto-loader": "^0.5.4",
    "@nguniversal/builders": "^9.0.0",
    "@types/jasmine": "~3.5.3",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~13.7.0",
    "codelyzer": "^5.2.1",
    "cpy-cli": "2.0.0",
    "express": "4.17.1",
    "firebase-tools": "^7.12.1",
    "fuzzy": "^0.1.3",
    "http-server": "0.12.1",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.0",
    "karma-jasmine-html-reporter": "^1.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "nodemon": "^2.0.2",
    "pre-commit": "1.2.2",
    "protractor": "~5.4.3",
    "reflect-metadata": "0.1.13",
    "ts-loader": "^6.2.1",
    "ts-node": "~8.6.2",
    "tslint": "~6.0.0",
    "typescript": ">=3.6.4 <3.8.0",
    "wait-on": "^4.0.0",
    "webpack-cli": "^3.3.6",
    "ws": "^7.2.3",
    "xhr2": "^0.2.0"
  }
}

Angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "universal-starter-v9": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/universal-starter-v9/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "universal-starter-v9:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "universal-starter-v9:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "universal-starter-v9:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "universal-starter-v9:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "universal-starter-v9:serve:production"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/universal-starter-v9/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "externalDependencies": [
              "@nestjs/microservices",
              "@nestjs/microservices/microservices-module",
              "@nestjs/websockets",
              "@nestjs/websockets/socket-module",
              "cache-manager",
              "@firebase/firestore",
              "firebase/firestore",
              "@grpc/proto-loader"
            ]
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": false
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "universal-starter-v9:build",
            "serverTarget": "universal-starter-v9:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "universal-starter-v9:build:production",
              "serverTarget": "universal-starter-v9:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "universal-starter-v9:build:production",
            "serverTarget": "universal-starter-v9:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {}
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }
      }
    }
  },
  "defaultProject": "universal-starter-v9",
  "cli": {
    "analytics": false
  }
}

[n3nikita]

I think my issue is related to this. #2416
Do you get timeout error?

I'm creating working repo with my problem from scratch now.

[tskweres]

No timeout error, the chrome page still remains it its 'loading' state with the 'X' in the top left, but no server errors, no webpage render

[rogervanwile]

@tskweres : Do you have a workaround right now? I have the same issue in my project and invested hours of debugging, but have no idea how to solve it. I'm not that familiar with zone.js.

Btw. I can reproduce this issue with Angular 8 and Angular Fire 5.4.2

Angular CLI: 8.3.25
Node: 10.19.0
OS: darwin x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.802.2
@angular-devkit/build-angular              0.803.25
@angular-devkit/build-ng-packagr           0.802.2
@angular-devkit/build-optimizer            0.803.25
@angular-devkit/build-webpack              0.803.25
@angular-devkit/core                       8.2.2
@angular-devkit/schematics                 8.3.25
@angular/cdk                               8.2.3
@angular/cli                               8.3.25
@angular/fire                              5.4.2
@angular/material                          8.2.3
@ngtools/webpack                           8.3.25
@nguniversal/express-engine                8.2.6
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.3.25
@schematics/update                         0.803.25
ng-packagr                                 5.7.1
rxjs                                       6.5.3
typescript                                 3.5.3
webpack                                    4.39.2

[tskweres]

I don't, waiting on 6.0.1 :(

Continuing to code running the app on the front-end until the fix is out

[n3nikita]

I've checked today. I also have infinity loading when call this.db.collection('.....'). I'll try to reproduce this issue with Angular 9. Will update soon

[rogervanwile]

@tskweres, @n3nikita : Which versions of the Firebase SDK are you using? I just tried to downgrade to an older version, in my case from 7.14.1 to 7.0.0. And now it seems that the rendering is working.

Was only working on local SSR, not on Firebase Functions SSR. :(

[n3nikita]

@tskweres I've found that I face this problem when I trying to get only one item by id from the database.

Examples:

Articles page
I get all my articles by several parameters. It loads well and I don't have any errors.

this.db.collection('articles', ref => ref.orderBy('date', 'desc')
                                        .where('status', '==', status)
                                        .startAfter(last.date)
                                        .limit(count))
      .valueChanges({ idField: 'id' }).subscribe(articles => {
        this.updateSubjectByStatus(status, articles as Article[], isPush);
      });

Article page
I'm trying to get only one article by Id. This method works before but after update to Angular 9 and adding SSR I get an infinity loading.

return this.db.doc('articles/' + id)
      .snapshotChanges()
      .pipe(
        take(1),
        map(doc => {
          return {
            id: doc.payload.id,
            ...(doc.payload.data() as object) 
          } as Article;
        }));

I changed my method by the following one and page seems to be working fine. Infinity loading gone.

return this.db.collection('articles').doc(id).valueChanges();

[n3nikita]

I also use the AuthService at my component and when I subscribe to authState I face this problem.

My auth.service.ts file:

export class AuthService {
  constructor(
    private authFire: AngularFireAuth) {
  }

  isAuth() {
    return this.authFire.authState;
  }
}

This is how I call isAuth() at my component:

this.authService.isAuth().subscribe(data => {
    this.user = data;
});

when I comment this code page loads well

[tskweres]

@n3nikita @rogervanwile

FYI:

1. I tried testing the .doc vs .collection methods, same issue.
2. I tried wrapping the AngularFirestore calls in Zone.run, still the same issue
3. I tried installing firebase 7.0.0, but it created a bunch of other errors so I went back to @latest

[urish]

Same issue here, fixed by downgrading back to 5.2.3

[tskweres]

@urish can you post your package.json?

I try running with @angular/fire 5.2.3, but it breaks AngularFireAuth, I'm assuming AngularFireAuth changed between 5.2.3 -> 6

[urish]

Yes, you need to add .auth before any calls to signInWithPopup(), e.g.

this.afa.signInWithPopup(new firebase.auth.GoogleAuthProvider());

turns into

this.afa.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

and possibly other methods