ngx-translate не отображает перевод в режиме сервера, но отображает HTML - PullRequest
Новая
       3

ngx-translate не отображает перевод в режиме сервера, но отображает HTML

0 голосов
/ 31 января 2020

Мое 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;
    }
  }
}

1 Ответ

0 голосов
/ 11 февраля 2020

Перед использованием убедитесь, что переменная PAGES определена, например, 

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

В противном случае вы можете использовать безопасный оператор, чтобы избежать ошибок 

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