Angular 2 translations with Webpack

Question

Я стараюсь следовать за Уклонившейся поваренной книжкой за internationalization, но мы используем Webpack вместо SystemJS. В поваренной книге есть следующий фрагмент:

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' 
      } 
     ] 
    } 

Используя необработанный погрузчик конвейер к обещанию погрузчиком расскажет Webpack поставить мои XLF файлы в новом блоке, и загружать их по требованию, возвращая обещание, которое разрешит содержимое файла при вызове require('filename')().

Примечания:

1. Вы должны сказать обещание-загрузчик, который обещают библиотеку использовать.
2. Потому что я не говорю webpack, какой загрузчик использовать в require('file'), он попытается отсканировать все файлы и будет жаловаться, что он не может загрузить файлы .json. Вот почему мне пришлось настроить правило для json с загрузчиком игнорирования.

Надеюсь, это поможет.

Answer 2

С Webpack 2 Я использую текущую конфигурацию:

В моей webpack.config.js я поставил raw-loader обрабатывать .xlf файлы, это говорит 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'); 

}