Angular命令行+ Webpack + i18n模块集成
我正在使用Angular CLI版本1.0.0-beta.19-3进行一些测试，该版本安装并使用Angular 2.1.0。您可能已经知道，Angular-cli使用的是Webpack。
我尝试按照Angular 2 Cookbook中的步骤一步一步地配置i18n模块。唯一的问题是，该过程在XLIFF文件合并的末尾使用了一个System.JS。
我不知道如何处理这部分过程，因为Angular CLI使用的是Webpack，而不是systemJS。
Stack Overflow用户
发布于 2017-01-27 00:19:44
我也被困在那里，做出了一些我当然不会认为是“最终”的东西，但足以证明概念的实现：
不需要对necessary
- SystemJS文本插件进行修订(因为我们使用的是
- ，而不是SystemJS)
此外，我们没有使用该插件的替代方案。(有一个针对webpack的插件，但不幸的是，我们目前不能用angular-cli配置webpack )，我们只需手动将.xlf-Files重写为.ts-Files即可。每个翻译文件看起来都是这样的。
示例messages.fr.ts：
导出常量翻译= <?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必须像这样进行调整：
从‘@angular/TRANSLATIONS_FORMAT’导入{ TRANSLATIONS，TRANSLATIONS_FORMAT，LOCALE_ID }；声明var System: any；接口TranslationFileContent {翻译: string；}导出函数getTranslationProviders()：Promise< Object[] > { //在此处设置您的语言环境或从某个地方获取(例如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)；//在此处添加其他语言默认: return Promise.resolve(noProviders)；}}函数返回(TRANSLATIONS: TranslationFileContent，locale: string) {createProviders{ provide: TRANSLATIONS，useValue: translations.Translation }，{ provide: TRANSLATIONS_FORMAT，useValue：'xlf‘}，{ provide: LOCALE_ID，useValue: locale }；}
如果你对开关盒感到惊讶...Webpack只会捆绑它可以从文件中读出的文件，所以像System.import('./messages.' + locale + '.ts');这样的东西对我来说不起作用。如果您发现了什么，可以在这里添加，因为comment.
- main.ts与i18n
的angular cookbook中的相同
关于JiT (即时)与AoT (提前)编译:上面的解决方案是针对JiT的。我有另一个用于AoT的解决方案(实际上更简单)，但没有同时适用于两者的解决方案(项目设置)。
希望这能有所帮助(而且答案还不算太晚)。
https://stackoverflow.com/questions/40619620
复制相似问题
腾讯云开发者
