ngx-translate 在服务器模式下不显示翻译但呈现 HTML答案

【问题标题】：ngx-translate doesn't display translation in server mode but renders HTMLngx-translate 在服务器模式下不显示翻译但呈现 HTML
【发布时间】：2020-01-31 10:10:22
【问题描述】：

我的 Angular 应用程序以通用方式呈现服务器端，我在浏览器中获得翻译，但在源代码中它只呈现 HTML 输出而不是翻译。

      <p class="title">{{ 'PAGES.LANDING.HOW_2' | translate }}</p>

<body>
  <app-root _nghost-sc0="" ng-version="8.2.14"><app-header _ngcontent-sc0="" _nghost-sc1=""><!----><div _ngcontent-sc1="" class="header_container ng-star-inserted" id="header_container"><div _ngcontent-sc1="" class="left" id="left_nav_header"><label _ngcontent-sc1="" aria-haspopup="true" class="mat-menu-trigger"><svg _ngcontent-sc1="" class="hamburger_svg" fill="none" height="40" viewBox="0 0 32 40" width="32" xmlns="http://www.w3.org/2000/svg"><path _ngcontent-sc1="" d="M4.12799 25.6001C4.12799 26.8161 5.15199 27.8721 6.36799 27.8721C7.58399 27.8721 8.60799 26.8481 8.60799 25.6001C8.60799 24.3841 7.58399 23.3281 6.36799 23.3281C5.15199 23.3601 4.12799 24.3841 4.12799 25.6001Z" fill="#A1A2B2"></path><path _ngcontent-sc1="" d="M4.12799 16C4.12799 17.216 5.15199 18.272 6.36799 18.272C7.58399 18.272 8.60799 17.248 8.60799 16C8.60799 14.784 7.58399 13.728 6.36799 13.728C5.15199 13.76 4.12799 14.784 4.12799 16Z" fill="#A1A2B2"></path><path _ngcontent-sc1="" d="M4.12799 6.40017C4.12799 7.61617 5.15199 8.67217 6.36799 8.67217C7.58399 8.67217 8.60799 7.64817 8.60799 6.40017C8.60799 5.18417 7.58399 4.12817 6.36799 4.12817C5.15199 4.16017 4.12799 5.18417 4.12799 6.40017Z" fill="#A1A2B2"></path><path _ngcontent-sc1="" d="M26.528 8.67217H12.672C11.424 8.67217 10.4 7.64817 10.4 6.40017C10.4 5.15217 11.424 4.12817 12.672 4.12817H26.528C27.776 4.12817 28.8 5.15217 28.8 6.40017C28.8 7.64817 27.776 8.67217 26.528 8.67217Z" fill="#A1A2B2"></path><path _ngcontent-sc1="" d="M26.528 18.272H12.672C11.424 18.272 10.4 17.248 10.4 16C10.4 14.752 11.424 13.728 12.672 13.728H26.528C27.776 13.728 28.8 14.752 28.8 16C28.8 17.248 27.776 18.272 26.528 18.272Z" fill="#A1A2B2"></path><path _ngcontent-sc1="" d="M26.528 27.8721H12.672C11.424 27.8721 10.4 26.8481 10.4 25.6001C10.4 24.3521 11.424 23.3281 12.672 23.3281H26.528C27.776 23.3281 28.8 24.3521 28.8 25.6001C28.8 26.8481 27.776 27.8721 26.528 27.8721Z" fill="#A1A2B2"></path></svg><

我的文本是在浏览器中翻译的，但不是在我需要用于 SEO 的源代码中。构建npm run build:ssr && npm run serve:ssr时出现以下错误@

ERROR TypeError: Cannot read property 'LANDING' of undefined
at /Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:88705:46
at Array.forEach (<anonymous>)
at TranslatePipe../src/app/pipes/translate.pipe.ts.TranslatePipe.transform (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:88705:14)
at Object.updateRenderer (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:84252:1172)
at Object.updateRenderer (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:34047:70)
at checkAndUpdateView (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:33703:14)
at callViewAction (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:33939:21)
at execComponentViewsAction (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:33881:13)
at checkAndUpdateView (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:33704:5)
at callViewAction (/Users/dev/Desktop/pinploylive/pinploy-web/dist/server.js:33939:21)

packackge.json

 "@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",

这是我的 Translate.pipe.ts

   @Pipe({ name: 'translate', pure: false })
export class TranslatePipe implements PipeTransform {

  constructor(private translate: TranslateService, @Inject(PLATFORM_ID) private platformId: object) {}
  transform(key: any): any {
    if (isPlatformBrowser(this.platformId)) {
     const keys = key.split('.');
     let res = this.translate.data;
     keys.forEach(k => { res = res[k]; });
     return res || key;
    }
  }
}

【问题讨论】：

好吧，不知何故 PAGES 变量是未定义的。也许尝试PAGES?.LANDING，或者确保在尝试渲染其内容之前分配PAGES
请解释如何在渲染之前确保这一点，我不能在服务器上使用 setTimeout
我添加了一个包含更多细节的答案

标签： angular-universal

【解决方案1】：

确保PAGES变量在使用前已定义，例如

<p class="title" *ngIf="PAGES">{{ 'PAGES.LANDING.HOW_2' | translate }}</p>

否则，你可以使用安全运算符来避免错误

<p class="title">{{ 'PAGES?.LANDING.HOW_2' | translate }}</p>

【讨论】：