带有i18n的Angular Universal(服务器端渲染)

发布时间：2020-12-17 08:00:19 所属栏目：安全来源：网络整理

导读：我尝试使用角度通用的Angular官方国际化工具。到目前为止，我能够使用以下过程翻译客户端渲染(感谢此答案 https://stackoverflow.com/a/40930110/1110635)：我在模板中的文档中添加了“i18n”属性： ./src/ app / about / about.component.html： h1 i18n="

我尝试使用角度通用的Angular官方国际化工具。到目前为止，我能够使用以下过程翻译客户端渲染(感谢此答案 https://stackoverflow.com/a/40930110/1110635)：

我在模板中的文档中添加了“i18n”属性：

./src/ app / about / about.component.html：

<h1 i18n="H1 of the about component">About</h1>
...

然后我跑：

./node_modules/.bin/ng-xi18n

生成基本messages.xlf文件。

然后，我将每个要支持的语言环境的文件复制为“locale”文件夹中的“messages。[locale] .xlf”。
准备好后，我为每个包含其内容的导出字符串的xlf文件创建“messages。[locale] .ts”：

./locale/messages.fr.ts：

// TRANSLATION_FR is only for "messages.fr.ts" of course.
// I would create a TRANSLATION_ES const inside "messages.es.ts" for spanish for example.
export const TRANSLATION_FR: string = `<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="004b222ff9ef9dd4771b777950ca1d0e4cd4348a" datatype="html">
        <source>About</source>
        <target>A propos</target>
        <note priority="1" from="description">H1 of the about component</note>
      </trans-unit>
    </body>
  </file>
</xliff>
`;

最后，我的client.ts文件如下所示：

./src/client.ts：

[...]

// i18n
import { TRANSLATIONS,TRANSLATIONS_FORMAT,LOCALE_ID  } from '@angular/core';
import { TRANSLATION_FR } from '../locale/messages.fr';

import { MainModule } from './browser.module';

export const platformRef = platformUniversalDynamic();

// on document ready bootstrap Angular 2
export function main() {
  return platformRef.bootstrapModule(MainModule,{
      providers: [
          {provide: TRANSLATIONS,useValue: TRANSLATION_FR},{provide: TRANSLATIONS_FORMAT,useValue: "xlf"},{provide: LOCALE_ID,useValue: 'fr'}
      ]
  });
}
bootloader(main);

这可以使“客户端”应用程序按预期工作。 “关于”被“A propos”取代。但是，因为角度通用预渲染服务器端的页面使用表达文本在客户端引导完成之前不会被翻译。

因此，当您第一次进入页面时，您会看到“关于”大约1秒钟，然后客户端才会用“A propos”替换它。

解决方案似乎很明显，只需在服务器端运行翻译服务！但我不知道该怎么做。

我的server.ts看起来像这样：

./src/server.ts

[...]

// i18n
import { TRANSLATIONS,LOCALE_ID  } from '@angular/core';
import { TRANSLATION_FR } from '../locale/messages.fr';

const app = express();
const ROOT = path.join(path.resolve(__dirname,'..','dist'));

// Express View
app.engine('.html',createEngine({
    ngModule: MainModule,providers: [
      /**
       * HERE IS THE IMPORTANT PART.
       * I tried to declare providers but it has no effect.
       */
      {provide: TRANSLATIONS,useValue: 'fr'}
    ]
}));
app.set('port',process.env.PORT || 3000);
app.set('views',ROOT);
app.set('view engine','html');
[...]

function ngApp(req,res) {
    res.render('index',{
      req,res,preboot: false,baseUrl: '/',requestUrl: req.originalUrl,originUrl: `http://localhost:${ app.get('port') }`
    });
}
app.get('*',ngApp);

// Server
let server = app.listen(app.get('port'),() => {
    console.log(`Listening on: http://localhost:${server.address().port}`);
});

我没有像客户端那样直接访问bootstrapModule方法。 “createEngine”参数对象上的提供者键已经存在于original server.ts code中。

我错过了什么？

解决方案是为每种语言预构建包，并让代理检测哪个包作为默认值。

从Angular docs on i8n：

Merge with the AOT compiler The AOT (Ahead-of-Time) compiler is part
of a build process that produces a small,fast,ready-to-run
application package.

When you internationalize with the AOT compiler,you must pre-build a
separate application package for each language and serve the
appropriate package based on either server-side language detection or
url parameters.

You also need to instruct the AOT compiler to use your translation
file. To do so,you use three options with the ng serve or ng build
commands:

–i18nFile: the path to the translation file.
–i18nFormat: the format of the translation file.
–locale: the locale id. The example below shows how to serve the French language file created in previous sections of this guide:

06000

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!