I have an Angular 11 project with nguniversal. My homepage is fetching data from services, internal (translation keys object) and external (an express node server to display a list of links). The backend domain is different from the frontend domain address.

The website is displayed correctly, but for some reason, the translations and list of links are not loaded initially when I inspect the page source. Also, the meta and title tags are not visible in the page source. Although they are working.

I believe this should be essential for Search Engine Optimization.

I am loading the language keys from an internal translation service, as observable into the app.component.ts. The translation service itself is dependent on a window service which waits for the browser to load, isPlatformBrowser. The window service is needed to simulate the window object on the server.

I also tried fetching the api data, before or after platform browser initializes, but with no success.

What else am I missing?

EDIT, part of the code. Not sure if I should include the whole project code here:

"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"

CodePudding user response：

Actually I needed to implement a resolver for my component. So it waits for data to be fetched from a service.

Angular Resolve

This question actually helped with the implementation.

Some questions still remain, but it looks like a step in the right direction.