Угловая интеграция модулей CLI + Webpack + i18n

Я делаю некоторые тесты с Angular CLI версии 1.0.0-beta.19-3, которая устанавливает и использует Angular 2.1.0. Как вы, наверное, знаете, Angular-cli использует Webpack.Угловая интеграция модулей CLI + Webpack + i18n

Я попытался настроить модуль i18n, выполнив процедуру шаг за шагом в Angular 2 Cookbook. Единственная икота заключается в том, что процедура использует System.JS ближе к концу для слияния файлов XLIFF.

Я не знаю, как обрабатывать эту часть процедуры, так как Угловой CLI использует Webpack, а не systemJS.

источник

2016-11-15 Steph S

Вопросы, предлагающие нам рекомендовать или находить книгу, инструмент, библиотеку программного обеспечения, учебное пособие или другие ресурсы за пределами сайта, не относятся к теме для переполнения стека, поскольку они склонны привлекать упрямые ответы и спам. Вместо этого опишите проблему и то, что было сделано до сих пор, чтобы ее решить. –

Роджер, что. Я думал, что было ясно, что я не мог просто шаг за шагом следовать процедуре в официальной документации. Обновленный вопрос. –

Попробуйте ng2-translate, это сработало для меня. https://github.com/ocombe/ng2-translate –

я застрял там и сделал что-то работу, я, конечно, не считать «окончательным», но достаточно для доказательства реализации концепции:

Нет пересмотра index.html необходимо
Системный плагин SystemJS не нужен (как мы используем Webpack, а не SystemJS)

Также мы не используем альтернативу для этого плагина. (Существует плагин для webpack, но, к сожалению, мы не можем настроить webpack в настоящее время с помощью angular-cli). Вместо этого мы просто перезаписываем .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 такое же, как в угловом поваренной книги для i18n

Что касается JIT (Just-In-Time) против АОТ (вперед-оф-Time) компиляции: Раствор выше для JiT. У меня было другое решение для AoT (которое было на самом деле проще), но не было решения (настройка проекта), которое работало одновременно и для него.

Надеюсь, что это помогло (и ответ пришел не слишком поздно).

источник

2017-01-26 16:19:43 nothing9

Это хорошо для меня. Но можно ли дать нам свое решение в angular-cli (webpack) для aot, или, по крайней мере, только хорошо. – Viet

Я думаю, что решил свою проблему. Ниже приведена ссылка, которую любой, кто заботится, может ссылаться на: https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.rzwmzdgjg – Viet

@Viet Да, я также после ссылки, которую вы разместили для aot. – nothing9

Я знаю, что это старое, но вы можете преодолеть этот вопрос в ответе nothing9 в

Вы можете избежать оператора коммутатору с помощью System.import ('забортного погрузчика! .. для исходного файла 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

Прохладный, я не знал о raw-loader. Спасибо за это! – nothing9

Угловая интеграция модулей CLI + Webpack + i18n

ответ

Смежные вопросы