web-dev-qa-db-ja.com

Angular2とwebpack-i18nプラグインとng2-translate

Angle2でWebアプリケーションを構築し、これをwebpackにバンドルしたいと思います。複数の言語を提供するための最良の方法は何ですか：

i18n-プラグイン： https://github.com/webpack/i18n-webpack-plugin

または

ng2-translate： https://github.com/ocombe/ng2-translate

angularinternationalizationwebpackng2-translate
8
circy

クックブックを使用してwebpackで動作させました。 xliffファイルは次のようにtsに変換する必要があります。

export const TRANSLATION_SV = `<?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="a73e2898b9e1126ed19dbabe4b5c3715a84db61a" datatype="html">
      <source>Category</source>
      <target>Kategori</target>
    </trans-unit>
    </body>
  </file>
</xliff>`;

次に、main.tsに追加する必要があります

import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID  } from '@angular/core';
import { TRANSLATION_SV } from './locale/messages.sv';

そしてbootstrapステップに挿入されます：

platformBrowserDynamic().bootstrapModule(AppModule, {
    providers: [
      {provide: TRANSLATIONS, useValue: TRANSLATION_SV},
      {provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
      {provide: LOCALE_ID, useValue:'sv'}
    ];
});
9
user2095736

angular-cliを使用している場合は、次の手順に従うことができます。

アプリはAOT compatibeでなければならないことに注意してください。そのため、--aotスイッチを使用してアプリをビルドできるはずです。

ng build --aot

  1. ng xi18nコマンドを使用してメッセージを抽出し、翻訳ファイルの場所を指定します。

    ng xi18n --output-path src/i18n

  2. src/i18n/messages.xlfファイルを取得します。このファイルをコピーして、メッセージを必要な言語に翻訳します。

    src/i18n/messages.en.xlf
src/i18n/messages.pl.xlf

  3. ng serve / ng buildコマンドを使用してアプリを提供/ビルドします（それに応じてロケールを変更します）：

    ng serve --i18n-file=src/i18n/messages.en.xlf --locale=en --i18n-format=xlf --aot
8
lukk

angular 2ローカリゼーションをwebpackローダーで使用する方法をまだ疑問に思っている人のために、プロバイダーを変更しましたangular 2クックブックが提供されています。

最初 i18n.provider.tsを作成します

import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { Observable } from "rxjs/Rx";
export function getTranslationProviders(): Promise<Object[]> {


  // Get the locale id from the global
  const locale = document['locale'] as string;
  // return no providers if fail to get translation file for locale
  const noProviders: Object[] = [];
  // No locale or U.S. English: no translation providers
  if (!locale || locale === 'en') {
    return Promise.resolve(noProviders);
  }
  // Ex: 'locale/messages.fr.xlf`
  const translationFile = `./src/app/localezation/messages.${locale}.xlf`;
  var provider = getTranslationsWithSystemJs(translationFile)
    .then((translations: string) => [
      { provide: TRANSLATIONS, useValue: translations },
      { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
      { provide: LOCALE_ID, useValue: locale }
    ])
    .catch(() => noProviders); // ignore if file not found

  debugger;
  return provider;
}
declare var System: any;
function getTranslationsWithSystemJs(file: string) {
// changes Start here 
  var text = "";
  var fileRequest = new XMLHttpRequest();
  fileRequest.open("GET", file, false);
  fileRequest.onerror = function (err) {
    console.log(err);
  }
  fileRequest.onreadystatechange = function () {
    if (fileRequest.readyState === 4) {
      if (fileRequest.status === 200 || fileRequest.status == 0) {
        text = fileRequest.responseText;
      }
    }
  }
  fileRequest.send()
  var observable = Observable.of(text);
  var prom = observable.toPromise();
  return prom; 
}

変更点は次のとおりです。

  1. jxjsライブラリを使用してobservable/promiseを作成しました
  2. xMLHttpRequestを使用してローカリゼーションファイルを取得しました

Second main.tsファイルで、angular Cookbook）で説明したのと同じようにブートストラップを変更します

getTranslationProviders().then(providers => {
  const options = { providers };
  platformBrowserDynamic().bootstrapModule(AppModule, options);
});
6
M.Nour Berro

Angular 2 Finalリリースにはi18nネイティブサポートがあります https://angular.io/docs/ts/latest/cookbook/i18n.html

別の答えを確認してください https://stackoverflow.com/a/39004058/1267942 例と使用法の詳細を示します。

ng2-translateは、ネイティブ実装と比較して冗長すぎます。また、ng2-translateの author は angular 2 i18nドキュメント に大きく貢献しています。

3
Andrei Zhytkevich

@ M.NourBerroの回答を少し変更したバージョン。

同期xhrは非推奨であり、サポートが後で削除される可能性があるため、この変更を行いました。

function getTranslations(filePath: string): Promise<string> {
  var text = '';
  return new Promise<string> ((resolve, reject) => {
    const fileRequest = new XMLHttpRequest();
    fileRequest.open('GET', filePath, true);
    fileRequest.onerror = function (err) {
      console.log(err);
      reject(err);
    };
    fileRequest.onreadystatechange = function () {
      if (fileRequest.readyState === 4) {
        if (fileRequest.status === 200 || fileRequest.status === 0) {
          text = fileRequest.responseText;
          resolve(text);
        }
      }
    };
    fileRequest.send();
  });
}
0
M22an