Question

我正在使用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。

Answer 1

我也被卡在那里并做了一些工作当然我不会考虑'最终'，但足以证明概念的实施：

无需修改index.html
SystemJS Text-Plugin不是必需的（因为我们使用Webpack而不是SystemJS）

此外，我们不使用此插件的替代方案。（有一个webpack插件但不幸的是我们目前无法使用angular-cli配置webpack）而是我们只需手动将.xlf-Files重写为.ts-Files。每个翻译文件都是这样的。

示例messages.fr.ts：
```
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>
`;
```

i18n-providers.ts必须像这样进行调整：

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');这样的东西对我来说不起作用。如果您发现可以在此处添加此内容作为评论。

main.ts与i18n的角度食谱相同

关于JiT（即时）与AoT（提前）编译：上述解决方案适用于 JiT 。我有另一个AoT解决方案（实际上更简单），但没有解决方案（项目设置）同时适用于两者。

希望这有所帮助（并且答案来得太晚了）。

Answer 2

我知道这已经过时了但你可以在没有答案的情况下克服这个问题

您可以通过使用System.import（＆＃39; raw-loader！..）来处理原始xlf文件，从而避免使用switch语句。然后代码看起来像这样，您不需要更改生成的xlf文件。 / p>

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);

关键位是＆＃34; raw-loader！＆＃34;在System.import调用中。实现此目的的另一种方法是使用webpack配置文件（webpack.config.js）中的规则

rules: [
{
"test": /.xlf/,
"loader": "promise-loader?es6-promise!raw-loader"
},

这将告诉webpack加载所有xlf扩展名为raw的文件。

Angular CLI + Webpack + i18n模块集成

2 个答案: