./src/ app / about / about.component.html：
<h1 i18n="H1 of the about component">About</h1> ...
然后我跑：
./node_modules/.bin/ng-xi18n
然后，我将每个要支持的语言环境的文件复制为“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中。
我错过了什么？
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
