ウェブパックで角度2の翻訳

Question

私はinternationalizationの角料理書に従っていますが、SystemJSではなくWebpackを使用しています。

function getTranslationsWithSystemJs(file: string) { 
    return System.import(file + '!text'); // relies on text plugin 
} 

それは翻訳ファイルをロードするためのSystemJSを使用しています。 は料理本では次のスニペットがあります。代わりに何を使うべきですか？

Answer 1

編集

WebPACKの2からは、System.import('./relative/path_to/messages.' + locale + '.xlf')を使用することができますし、WebPACKのは、ファイルを取得し、一致する可能性は明白ではないファイルのスキャンを回避します。

オリジナル

ありそれを解決する方法はいくつか（たぶん）ですが、これが私のために最善を働いた：私のi18n-providers.jsで

：

function getTranslationFilesWithWebpack(locale: string) { 
    const translationFile = `./assets/locale/messages.${locale}.xlf`; 
    return require('' + translationFile)() 
} 

この実行時にファイルが必要であることをwebpackに知らせます。次に、webpackにファイルの処理方法を知らせる必要があります。 webpack.config.jsで

：

module: { 
     rules: [ 
      /* 
      * html, typescript and style rules 
      */ 
      { 
       test: /\.xlf/, 
       loader: 'promise-loader?es6-promise!raw' 
      }, 
      { 
       test: /\.json/, 
       loader: 'ignore-loader' 
      } 
     ] 
    } 

生ローダーを使用するには、新しいチャンクに私のXLFファイルを置くためにWebPACKのを教えてくれますし、返すことによって、需要によってそれらをロードするために約束ローダにパイプrequire('filename')()を呼び出すときにファイルの内容に解決される約束。

注：

1. あなたはライブラリが使用することを約束約束-ローダーを伝える必要があります。
2. require('file')で使用するローダーをwebpackに指示していないため、すべてのファイルをスキャンしようとしますが、.jsonファイルをロードできないという不満があります。そのため、jsonのルールを無視するローダーで設定する必要がありました。

私はそれが役に立ちそうです。

Answer 2

はWebPACKの2で、私は、現在の設定を使用します。私は.xlfファイルを処理するためにraw-loaderを設定し、私のwebpack.config.jsで

を、これは純粋なテキストとしてファイルをロードするためにWebPACKのを教えてください。

{ 
    test: /\.xlf/, 
    loader: 'raw-loader' 
} 

はその後i18n.providers.jsに私は次のように機能を定義しました。

function getTranslationsWithES6Import(locale: string) { 
/** 
* System.import in Webpack is an alias of the standard dynamic import() 
* but the latter can't be used because Typescript would complain. 
* @see https://webpack.js.org/guides/code-splitting-import/#dynamic-import 
* @see https://github.com/Microsoft/TypeScript/issues/12364 
* 
* Also the file name must not used backticks and the file extension must be 
* within the function call otherwise Webpack won't know how to load it. 
* @see https://github.com/angular/angular-cli/issues/5285#issuecomment-285059969 
*/ 
return System.import('../assets/locale/messages.' + locale + '.xlf'); 

}