3

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"
alex351
  • 1,826
  • 1
  • 21
  • 32
  • Code? Also are you using a service worker - @angular/pwa? – Pieterjan Nov 01 '21 at 14:04
  • @Pieterjan I don't know about the source code, It is pretty standard. You mean the package.json, angular.json, server.ts, app.module, app.server.module, app-routing.module, app.component, home.component.. Everything? No, not using angular/pwa. – alex351 Nov 05 '21 at 22:34
  • What backend stack are you using? The "list of links" you're referring to, does it come from the database? If so, your dist-files will need to reside on the backend server too, because, eg ASP.NET Core needs to invoke the `main.server.ts`. – Pieterjan Nov 05 '21 at 23:11
  • I have an express server with mongodb. – alex351 Nov 06 '21 at 12:48

1 Answers1

0

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.

alex351
  • 1,826
  • 1
  • 21
  • 32