Issue
I’am traing to add Angular server side redering using this tutorial:
https://angular.io/guide/universal
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
kingHours4bWeb\dist\WorkingHours4bWeb\browser"
at Function.render (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4
bWeb\server\main.js:128813:17)
at ServerResponse.render (C:\Data\Development\Web\WorkingHours4bWeb\dist\Working
Hours4bWeb\server\main.js:244414:7)
at C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\server\main.
js:373787:13
at Layer.handle [as handle_request] (C:\Data\Development\Web\WorkingHours4bWeb\d
ist\WorkingHours4bWeb\server\main.js:180406:5)
at next (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\server
\main.js:133160:13)
at Route.dispatch (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4b
Web\server\main.js:133135:3)
at Layer.handle [as handle_request] (C:\Data\Development\Web\WorkingHours4bWeb\d
ist\WorkingHours4bWeb\server\main.js:180406:5)
at C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\server\main.
js:413002:22
at param (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\serve
r\main.js:413075:14)
at param (C:\Data\Development\Web\WorkingHours4bWeb\dist\WorkingHours4bWeb\serve
r\main.js:413086:14)
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.
(Loading)
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 0.0.0.0 --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 ?
Solution
Short story
Most likely this is related with Firebase. Try to:
- Limit the use of
valueChanges()usingtake(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
firebaseand@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).
💡 NOTE
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.
📦 TIP
You could useUniversalServicefrom the@bespunky/angular-zenlibrary. 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.