Angular服务器端渲染无限加载无响应

Question

我正在训练使用本教程添加 Angular 服务器端重绘： https://angular.io/guide/universal

我正在使用 i18n 翻译 + 材料 + firebase。

由于错误，最初我不得不更改 server.ts 文件以指向正确的目录 (dist/browser/it)：

 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)

现在我的标签正在加载而没有给出任何结果，调试器中没有错误，只加载无限时间并且没有页面结果。我也尝试调试命令npm run dev:ssr，但我没有任何错误。

（加载中）

这是我的 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"
  }
}

有什么办法可以看到具体的错误吗？

Answer 1

短篇小说

这很可能与 Firebase 有关。尝试：

• 使用take(1)或一些类似的操作限制valueChanges()的使用。 出于测试目的，您可以将整个对 firebase 的调用替换为返回可观察对象或立即完成的承诺的模拟调用。如果有效，则表示您的问题出在对数据库的调用中。
• 使用不同版本的firebase 和@angular/fire。

长篇大论

为什么要限制valueChanges()？

Angular Universal 在服务器上运行您的代码。如果您的代码生成任何永远不会完成的异步操作或可观察对象，您的服务器将在等待操作完成时永远挂起。

valueChanges() 是客户端所必需的，以拥有“实时”流并将数据库更改实时反映到 UI。然而，在服务器上，这种行为与您需要的相反，因为您可能想要获取一些数据并呈现页面。

您的代码应该检测它是在浏览器上还是在服务器上运行，并创建适当的 observable（对于服务器，在第一次发射后完成，对于浏览器保持打开状态）。

? 注意 valueChanges() 在这种情况下是一个常见问题，但同样的概念也适用于您可能在代码中订阅的任何其他 observable。

? 提示 您可以使用 @bespunky/angular-zen 库中的 UniversalService。只需安装库并将服务注入您需要的位置。

为什么要尝试不同的版本？

在某个时候，@angular/fire 的某个版本存在一个错误，即库在内部导致操作未完成，进而导致 NgZone 任务永远无法完成。

解决方案是升级或降级，但您必须找到匹配的firebase 版本。