Angular 使用 Universal 和 Ionic 的 SSR 不在页面源代码中显示实际数据

Question

我有一个使用 nguniversal 的 Angular 11 项目。我的主页正在从服务、内部（翻译键对象）和外部（用于显示链接列表的快速节点服务器）获取数据。后端域名与前端域名地址不同

网站显示正确，但由于某些原因，当我检查页面源时，最初并未加载翻译和链接列表。此外，meta 和 title 标签在页面源代码中不可见。虽然他们正在工作。

我相信这对于搜索引擎优化来说应该是必不可少的。

我正在从内部翻译服务加载语言键，正如在 app.component.ts 中观察到的那样。翻译服务本身依赖于等待浏览器加载的 window 服务 isPlatformBrowser。需要 window 服务来模拟服务器上的 window 对象。

我也尝试在平台浏览器初始化之前或之后获取 api 数据，但没有成功。

我还缺少什么？

编辑，部分代码。不确定我是否应该在此处包含整个项目代码：

"dependencies": {
  "@angular/animations": "11.0.5",
  "@angular/common": "~11.0.5",
  "@angular/core": "~11.0.5",
  "@angular/forms": "~11.0.5",
  "@angular/platform-browser": "~11.0.5",
  "@angular/platform-browser-dynamic": "~11.0.5",
  "@angular/platform-server": "~11.0.5",
  "@angular/router": "~11.0.5",
  "@capacitor/core": "2.4.5",
  "@ionic-native/core": "^5.0.0",
  "@ionic-native/splash-screen": "^5.0.0",
  "@ionic-native/status-bar": "^5.0.0",
  "@ionic/angular": "^5.0.0",
  "@nguniversal/express-engine": "11.0.1",
  "@schematics/angular": "11.0.5",
  "@types/memory-cache": "0.2.1",
  "cors": "2.8.5",
  "express": "^4.15.2",
  "ion2-calendar": "3.5.0",
  "leaflet": "1.7.1",
  "memory-cache": "0.2.0",
  "moment": "2.29.1",
  "ng2-completer": "9.0.1",
  "ng2-file-upload": "1.4.0",
  "rxjs": "~6.5.5",
  "socket.io-client": "4.1.2",
  "tslib": "^2.0.0",
  "url-search-params-polyfill": "8.1.0",
  "zone.js": "~0.10.3"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.1100.5",
  "@angular/cli": "~11.0.5",
  "@angular/compiler": "~11.0.5",
  "@angular/compiler-cli": "~11.0.5",
  "@angular/language-service": "~11.0.5",
  "@capacitor/cli": "2.4.5",
  "@ionic/angular-server": "5.6.0-dev.202012021910.3a763f4",
  "@ionic/angular-toolkit": "^2.3.0",
  "@nguniversal/builders": "^11.0.1",
  "@types/express": "^4.17.0",
  "@types/jasmine": "~3.5.0",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "^12.11.1",
  "codelyzer": "^6.0.0",
  "jasmine-core": "~3.5.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~5.1.1",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage-istanbul-reporter": "~3.0.2",
  "karma-jasmine": "~3.3.0",
  "karma-jasmine-html-reporter": "^1.5.0",
  "protractor": "~7.0.0",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~4.0.5"

Answer 1

实际上我需要为我的组件实现解析器。所以它等待从服务中获取数据。

Angular Resolve

实际上帮助实施了。

一些问题仍然存在，但看起来是朝着正确方向迈出了一步。

Angular 使用 Universal 和 Ionic 的 SSR 不在页面源代码中显示实际数据

Angular SSR with Universal and Ionic doesn't show actual data in page source

ionic-framework

angular-universal

angular