Angular CLI + Webpack + i18n module integration

Angular CLIバージョン1.0.0-beta.19-3でいくつかのテストを行っていますが、これはAngular 2.1.0をインストールして使用しています。ご存知のように、Angular-cliはWebpackを使用しています。Angular CLI + Webpack + i18n module integration

Angular 2 Cookbookの手順に従って、i18nモジュールを設定しようとしました。唯一の厄介な点は、XLIFFファイルのマージの終わり近くにSystem.JSを使用していることです。

Angular CLIがsystemJSではなくWebpackを使用しているため、この手順の部分をどのように処理するかわかりません。

出典

2016-11-15 Steph S

書籍、ツール、ソフトウェアライブラリ、チュートリアル、その他のオフサイトリソースを推薦するか、見つけようとする質問は、批判的な回答と迷惑メールを引き付ける傾向があるため、スタックオーバーフローのトピックではありません。代わりに、問題を説明し、それを解決するためにこれまでに何が行われているかを記述します。 –

ロジャー。私は正式な文書の手順をステップバイステップで辿ることができなかったことは明らかだと思いました。更新された質問。 –

ng2-translateを試してみてください。 https://github.com/ocombe/ng2-translate –

私もそこに立ち往生し、もちろん私は「final」はなく、コンセプトの実現の証明のための十分考慮していないと何かの作業を行わしまっ：

必要なのindex.htmlのない改正
を
SystemJS Text-Pluginは不要です（WebJackでは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 } 
    ]; 
}

あなたは、スイッチケースについて驚いている場合... Webpackは、ファイルから読み取ることができるファイルのみをバンドルするので、System.import('./messages.' + locale + '.ts');のようなものは私のためには機能しませんでした。あなたが何かを見つける場合は、コメントとしてこれをここに追加してください。

main.ts（前・オブ・タイム）IBMアカデミー対JIT（ジャストインタイム）のコンパイルについては国際化

ための角度料理と同じである：上記のソリューションですJiT。私はAoT（実際にはよりシンプル）のための別のソリューションを持っていましたが、同時に両方で働いたソリューション（プロジェクトセットアップ）はありませんでした。

これが役に立った（と答えは遅すぎるとは思わない）。

出典

2017-01-26 16:19:43 nothing9

いいですね。しかし、私たちにあなたの解決策を与えることは可能でしょうか、少なくともaotだけが問題ありません。 – Viet

私は私の問題を解決したと思う。以下は、気になる人が参考にできるリンクです：https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.rzwmzdgjg – Viet

@Vietはい、私もaotのために投稿したリンクに続いています。 – nothing9

あなたはSystem.import（「生・ローダーを使用してswitch文を避けることができ、私は、これは古いです知っていますが、nothing9の答えで問題を克服することができます！..生のXLFファイルのため。そして、コードこのように見て、あなたが生成された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としてロードするように指示します。

出典

2017-07-12 23:25:05 ojf

クールな、私は生ローダーについて知らなかった。ありがとう！ – nothing9

Angular CLI + Webpack + i18n module integration

答えて

関連する問題