Pre-render from external source returns non-rendered html instead of static HTML Page

[musso]

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine
• module-map-ngfactory-loader

Is this a regression?

No

Description

When pre-rendering routes with any http calls, the route will be skipped to a non-rendered index.html

🔬 Minimal Reproduction

Any component with http call like using AngularFirestore

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 9.1.7
Node: 13.5.0
OS: darwin x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.1.7
@angular/cli                      9.1.7
@angular/fire                     6.0.0
@ngtools/webpack                  9.1.7
@nguniversal/builders             9.1.1
@nguniversal/common               9.1.1
@nguniversal/express-engine       9.1.1
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.42.0

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[musso]

@alan-agius4 I found that the problem(Routes being skipped) only exists when calling from angularfire . If I were using httpclient, the page could be rendered correctly.

Steps to reproduce

Create a firebase project with
In firebase > database > firestore
Create a collection test and document id page1 with any dummy content

ng new demo --routing --style=less --minimal --skipGit=false && cd demo
ng add @angular/fire@next
npm i -S firebase @firebase/app
ng add @nguniversal/express-engine   

In environment.prod.ts & environment.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX,
    databaseURL: "XXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXX",
    appId: "XXXXXXXXXXXX"
  }
};

In app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AngularFirestore } from '@angular/fire/firestore';
import { map } from 'rxjs/operators'

@Component({
  selector: 'app-root',
  template: `
    {{ result | json }}
  `,
  styles: []
})
export class AppComponent implements OnInit{

  result

  constructor(
    private afs: AngularFirestore,
    private http: HttpClient
  ) { }

  ngOnInit(): void {
    this.getHttp() // option 1, this works

    // this.getFirestore() // option 2, this wont work
  }

  async getHttp() {
    this.result = await this.http.get("https://jsonplaceholder.typicode.com/posts/1").toPromise()
  }

  async getFirestore() {
    this.result = await this.afs.collection("test").doc("page1").get().pipe(
      map(action => ({id: action.id, ...action.data()}))
    ).toPromise()
  }

}

In angular.json

...
"server": {
...
"options": {
...
"externalDependencies": ["@firebase/firestore"]
}
}
...

Using option 1, this.getHttp() and run npm run prerender
Generated dist/demo/browser/index.html shows rendered data from the http call

<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.37a7c028028debe7e785.css"></head>
<body>
  <app-root ng-version="9.0.7"> {
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
} </app-root>
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule="" defer=""></script><script src="polyfills-es5.03ba6fca1870326fbcc1.js" nomodule="" defer=""></script><script src="polyfills-es2015.870cff9c91eaf134b88a.js" type="module"></script><script src="vendor-es2015.3a620b5fb478a1b0f383.js" type="module"></script><script src="vendor-es5.3a620b5fb478a1b0f383.js" nomodule="" defer=""></script><script src="main-es2015.693e812b221d995acfb6.js" type="module"></script><script src="main-es5.693e812b221d995acfb6.js" nomodule="" defer=""></script>

</body></html><!-- This page was prerendered with Angular Universal -->

But if using option2, this.getFirestore() and run npm run prerender
Generated dist/demo/browser/index.html shows non-rendered html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.37a7c028028debe7e785.css"></head>
<body>
  <app-root></app-root>
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.03ba6fca1870326fbcc1.js" nomodule defer></script><script src="polyfills-es2015.870cff9c91eaf134b88a.js" type="module"></script><script src="vendor-es2015.3a620b5fb478a1b0f383.js" type="module"></script><script src="vendor-es5.3a620b5fb478a1b0f383.js" nomodule defer></script><script src="main-es2015.e904a69de25d8ab8281f.js" type="module"></script><script src="main-es5.e904a69de25d8ab8281f.js" nomodule defer></script></body>
</html>

[musso]

May I know if it is a bug or I perform it wrongly?

[CaerusKaru]

This is solely an issue with Angular Fire. They've had several issues with Angular Universal compatibility, but unfortunately we do not own or contribute to that project.

[musso]

Seem that it's the problem related to universal with rxjs.
It works if no pipe or toPromise(), like

await this.afs.collection("test").doc("page1").valueChanges().subscribe(res => {
     this.result = res
})

This is solely an issue with Angular Fire. They've had several issues with Angular Universal compatibility, but unfortunately we do not own or contribute to that project.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}