angularjs - Angular CLI + Webpack + i18n 模块集成

标签 angularjs angular internationalization webpack angular-cli

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

最佳答案

我也被困在那里并做了一些工作,当然我不会认为是“最终”但足以证明概念实现:

  1. 无需修改 index.html
  2. 不需要 SystemJS 文本插件(因为我们使用 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>
    `;
    
  3. 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' ); 对我不起作用。如果您发现了什么,请随时将其添加为评论。

  4. main.ts 与 i18n 的 angular cookbook 相同

关于 JiT (Just-in-Time) 与 AoT (Ahead-of-Time) 编译:上面的解决方案是针对 JiT 的。我有另一个 AoT 解决方案(实际上更简单),但没有同时适用于两者的解决方案(项目设置)。

希望这对您有所帮助(答案来得还不算太晚)。

关于angularjs - Angular CLI + Webpack + i18n 模块集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40619620/

相关文章:

ruby - 带有 Ruby i18ln 翻译的 'é' 字符

angularjs - 有条件地在angular js中添加ng-checked属性

angularjs - 我可以将 EJS 与 AngularJS 一起使用吗?

javascript - 如何在 Angular 4 中使用 socket.io-client

angular - 如何使用异步管道形式的 mat-option 值?

c# - 语言相关部分子串的国际化 (i18n)

angularjs - 如何使用 $on 和 $broadcast 在另一个模块中调用服务

javascript - 当从 Controller 调用 api 时,在回调中获取返回值(在 Angular Directive(指令)中)

Angular2 - http.post(...).map 不是函数

python - 使用 Babel 实现 GAE webapp 应用程序国际化