我正在使用 Angular CLI 版本 1.0.0-beta.19-3 进行一些测试,它安装并使用 Angular 2.1.0。您可能知道,Angular-cli 使用的是 Webpack。
我尝试按照 Angular 2 Cookbook 中的步骤逐步配置 i18n 模块。 .唯一的问题是该过程在接近尾声时使用 System.JS 进行 XLIFF 文件合并。
我不知道如何处理这部分过程,因为 Angular CLI 使用的是 Webpack,而不是 systemJS。
最佳答案
我也被困在那里并做了一些工作,当然我不会认为是“最终”但足以证明概念实现:
- 无需修改 index.html
不需要 SystemJS 文本插件(因为我们使用 Webpack 而不是 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 } ]; }
如果你对 switch-case 感到惊讶......Webpack 只会打包它可以从文件中读取的文件,比如
System.import('./messages.' + locale + '.ts' );
对我不起作用。如果您发现了什么,请随时将其添加为评论。main.ts 与 i18n 的 angular cookbook 相同
关于 JiT (Just-in-Time) 与 AoT (Ahead-of-Time) 编译:上面的解决方案是针对 JiT 的。我有另一个 AoT 解决方案(实际上更简单),但没有同时适用于两者的解决方案(项目设置)。
希望这对您有所帮助(答案来得还不算太晚)。
关于angularjs - Angular CLI + Webpack + i18n 模块集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40619620/