Angular 5国际化工作流程

时间:2018-03-12 13:14:59

标签: javascript angular typescript webpack internationalization

我目前的流程如下:

当前流程

我将i18n属性添加到模板中。 然后我执行ng xi18n。这将创建messages.xlf文件。 一旦完成该过程,您必须复制messages.xlf并将文件扩展名更改为*.fr.xlf。在重命名的文件中,您现在可以手动搜索所有<source>代码,并添加带有翻译的<target>代码。

如果有许多不同的语言,这个过程非常耗时。

问题

这里的问题是缺少翻译版本,特别是手动将<target>标记添加到相应的<source>标记。

所需的工作流程

最好有一个可以进行版本控制的工作流程,最重要的是,会自动创建所需的翻译文件。

webpack是否是解决此问题的正确方法?

2 个答案:

答案 0 :(得分:0)

我刚刚放弃了内置翻译和首选ngx-translate模块。

有了它你可以:   - 从源代码中自动提取翻译字符串   - 构建一个包含所有语言环境的应用程序   - 在运行时更改区域设置

答案 1 :(得分:0)

如果您在支持正则表达式搜索的IDE中,则可以使用正则表达式进行搜索和替换,例如

search: (\s*)<source>([^<]*)</source>
replace: $1\n$2<target>$3</target>

这将在每个来源之后添加target

关于更新翻译,你应该有一个版本控制工具,它会突出显示文件中的更改。您所要做的就是在涉及此文件的每次提交时保持更新。

我同意这不实用,因此您无法翻译打字稿代码。但这些是你可以在此期间用来缓解生活的变通方法。