我尝试使用Angular官方的国际化工具与Angular Universal一起使用。到目前为止，我能够使用以下过程翻译客户端渲染（感谢这个答案https://dev59.com/aJrga4cB1Zd3GeqPrsM-#40930110）：
我在我的模板中按照文档中所述添加了“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);
这能使“客户端”应用程序按预期工作。 “About”被替换为“A propos”。但是，因为Angular Universal在服务器端使用Express预渲染页面，直到客户端启动完成后文本才会被翻译。
因此，当您第一次进入页面时，您将看到关于1秒钟的时间，然后客户端开始并用“A propos”替换它。
解决方案似乎很明显，只需在服务器端运行翻译服务即可！但我不知道如何做到这一点。
我的server.ts看起来像这样：
./src/server.ts
[...]
// i18n
import { TRANSLATIONS, TRANSLATIONS_FORMAT, 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: TRANSLATION_FR},
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
{provide: LOCALE_ID, 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方法。在原始的server.ts代码中，"createEngine"参数对象上的providers键已经存在。
我缺少了什么？