[Fixed] Angular Server Side Rendering Infinit loading no response


I’am traing to add Angular server side redering using this tutorial:

I’am using i18n translation + material + firebase.

Initially i had to change server.ts file in order to point to right directory (dist/browser/it) beacuse of error:

 Error: Failed to lookup view "index" in views directory "C:\Data\Development\Web\Wor
    at Function.render (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4
    at ServerResponse.render (C:\Data\Development\Web\WorkingHours4bWeb\dist\Working
    at C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\server\main.
    at Layer.handle [as handle_request] (C:\Data\Development\Web\WorkingHours4bWeb\d
    at next (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\server
    at Route.dispatch (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4b
    at Layer.handle [as handle_request] (C:\Data\Development\Web\WorkingHours4bWeb\d
    at C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\server\main.
    at param (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\serve
    at param (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\serve

Now my tab is loading without giving any result, no error in de debugger, only loading infinite time and no page result. I have also tried to debug the command npm run dev:ssr but i don’t have any error.

enter image description here


Here is my package.json:

  "name": "working-hours4b-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start0000": "ng serve --host --disable-host-check",
    "dev:ssr": "ng run WorkingHours4bWeb:serve-ssr",
    "serve:ssr": "node dist/WorkingHours4bWeb/server/main.js",
    "build:ssr": "ng build --prod && ng run WorkingHours4bWeb:server:production",
    "prerender": "ng run WorkingHours4bWeb:prerender"
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.5",
    "@angular/cdk": "^11.0.3",
    "@angular/common": "~11.0.5",
    "@angular/compiler": "~11.0.5",
    "@angular/core": "~11.0.5",
    "@angular/fire": "^6.1.4",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.0.5",
    "@angular/http": "^7.2.16",
    "@angular/localize": "~11.0.5",
    "@angular/material": "^11.0.3",
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/platform-server": "~11.0.5",
    "@angular/router": "~11.0.5",
    "@js-joda/core": "^3.2.0",
    "@js-joda/extra": "^0.4.0",
    "@js-joda/locale": "^3.2.2",
    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
    "@nguniversal/express-engine": "^11.1.2",
    "bootstrap": "^4.5.0",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^0.7.0",
    "date-fns": "^2.16.1",
    "express": "^4.15.2",
    "firebase": "^8.2.1",
    "lodash": "^4.17.20",
    "materialize-angular": "^0.7.10",
    "materialize-css": "^1.0.0",
    "ng-inline-svg": "^11.0.1",
    "ng2-charts": "^2.4.2",
    "ngx-color-picker": "^11.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.10.2"
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular/cli": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@nguniversal/builders": "^11.0.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "^4.11.1",
    "@typescript-eslint/parser": "^4.11.1",
    "codelyzer": "^6.0.0",
    "eslint": "^7.16.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.2"

Is there any solution to see the exact error ?


Short story

Most likely this is related with Firebase. Try to:

  • Limit the use of valueChanges() using take(1) or some similar operation.
    For testing purposes, you could replace your entire call to firebase with a mock call that returns an observable or a promise that immediately completes. If it worked, it means your problem is in the call to the database.
  • Use different versions of firebase and @angular/fire.

Long Story

Why limiting valueChanges()?

Angular Universal runs your code on the server. If your code generates any async operations or observables that never complete, your server will hang forever as it is waiting for the operation to complete.

valueChanges() is necessary on the client to have a "live" stream and reflect DB changes to the UI in realtime. On the server however, this behavior is the opposite of what you need, as you would probably want to fetch some data and render the page.

Your code should detect whether it’s running on a browser or on the server and create the appropriate observable (one that completes after the first emission for server, one that stays open for browsers).

valueChanges() is a common problem in this case, but the same concept applies to any other observable you might have subscribed to in your code.

You could use UniversalService from the @bespunky/angular-zen library. Just install the library and inject the service where you need it.

Why trying different versions?

At some point, there was a version of @angular/fire which had a bug where the library had internally left an operation uncompleted, in turn causing a never completing NgZone task.

The solution was either upgrading or downgrading, but you had to find the matching firebase version.

Leave a Reply

(*) Required, Your email will not be published