我正在使用Angular CLI版本1.0.0-beta.19-3进行一些测试，它安装并使用Angular 2.1.0。您可能知道，Angular-cli正在使用Webpack。
我尝试按照Angular 2 Cookbook中的步骤逐步配置i18n模块。唯一的打嗝是该过程在最后使用System.JS进行XLIFF文件合并。
我不知道如何处理该部分程序，因为Angular CLI使用的是Webpack，而不是systemJS。
我也被卡在那里并做了一些工作，当然我不会考虑'最终'，但足以证明概念的实施：
export const Translation = `
<?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>
...
</body>
</file>
</xliff>
`;
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
declare var System: any;
interface TranslationFileContent {
Translation: string;
}
export function getTranslationProviders(): Promise<Object[]> {
// Set your locale here or get it from somewhere (e.g. localStorage)
let locale: string = 'fr';
const noProviders: Object[] = [];
switch (locale) {
case 'fr':
return System.import('./messages.fr.ts')
.then( (translations: TranslationFileContent ) => {
return createProviders(translations, locale);
})
.catch(() => noProviders);
// Add additional languages here
default:
return Promise.resolve(noProviders);
}
}
function createProviders(translations: TranslationFileContent, locale: string) {
return [
{ provide: TRANSLATIONS, useValue: translations.Translation },
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
{ provide: LOCALE_ID, useValue: locale }
];
}
如果你对switch-case感到惊讶...... Webpack只会捆绑文件，它可以从文件中读出来，所以像System.import('./messages.' + locale + '.ts');这样的东西对我来说不起作用。如果您发现某些内容可以在此处作为评论添加。关于JiT（即时）与AoT（Ahead-of-Time）编译：上面的解决方案是针对JiT的。我有另一个AoT解决方案（实际上更简单），但没有解决方案（项目设置）同时适用于两者。
希望这有所帮助（并且答案来得太晚）。
我知道这已经过时但你可以克服这个问题
您可以通过使用System.import（原始xlf文件的'raw-loader！..）来避免switch语句。然后代码看起来像这样，您不需要更改生成的xlf文件。
var filename = 'app.' + locale + '.xlf';
return System.import('raw-loader!./i18n/' + filename)
.then((translations: TranslationFileContent) => {
return [
{ provide: TRANSLATIONS, useValue: translations },
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
{ provide: LOCALE_ID, useValue: locale }
];
})
.catch(() => noProviders);
关键是“原始装载机！”在System.import调用中。实现此目的的另一种方法是使用webpack配置文件中的规则（webpack.config.js）
rules: [
{
"test": /.xlf/,
"loader": "promise-loader?es6-promise!raw-loader"
},
这将告诉webpack加载xlf扩展名为raw的所有文件。