Angular CLI 国际化 i18n 实战：extract-i18n 提取与翻译内联的完整工作流-北京尧图网络

Angular CLI 国际化 i18n 实战extract-i18n 提取与翻译内联的完整工作流【免费下载链接】angular-cliCLI tool for Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-cliAngular CLI 是 Angular 官方命令行工具它的国际化 i18n 能力可以帮你把应用中的可翻译文案一键提取出来再在构建时内联多语言翻译。本文带你走一遍 extract-i18n 消息提取翻译内联的完整工作流让中文、英文等多语言版本一次构建全部搞定。一、Angular i18n 的三步核心流程Angular CLI 的国际化工作流由三个环节组成彼此衔接提取Extract运行ng extract-i18n从源码中扫描i18n属性标记的文案生成消息文件如messages.xlf。翻译Translate把消息文件交给翻译人员或 CAT 工具填写各语言版本的译文。内联Inline在构建时通过 i18n 配置指定翻译文件CLI 将对应语言的文案直接内联进产物输出多语言站点。整个流程无需额外服务全部由 CLI 内置 builder 完成。二、准备工作添加 angular/localize 依赖extract-i18n 依赖angular/localize包缺失时 builder 会明确报错并提示添加方式见 builder.ts。执行一次即可ng add angular/localize命令入口定义在 extract-i18n/cli.ts它会为 application 类型项目自动匹配对应的 extract-i18n builder如angular/build:extract-i18n匹配逻辑见 cli.ts。三、在 angular.json 中配置 i18n 语言环境翻译内联的前提是在angular.json的项目节点下声明i18n配置{ projects: { my-app: { i18n: { sourceLocale: en-US, inline: [zh], locales: { zh: { translation: src/locale/messages.xlf, subPath: zh } } } } } }这些字段由 i18n-options.ts 统一解析几个要点sourceLocale源语言代码未配置时默认en-USi18n-options.ts。locales每种目标语言指定translation翻译文件可为数组构建时自动加载内联。subPath该语言的 URL 路径段与输出目录名默认等于语言代码。注意subPath与baseHref不能同时使用i18n-options.ts且启用 SSR 时建议使用subPathi18n-options.ts。source locale 不能同时提供翻译文件否则直接报错i18n-options.ts。四、运行 extract-i18n 提取翻译消息在命令行执行ng extract-i18n --projectmy-appbuilder 的核心执行逻辑在 extract-i18n/builder.ts校验项目必须是 application 类型 → 调用angular/localize/tools的MessageExtractor提取消息 → 检查重复翻译 → 按格式序列化写入文件。常用参数速查参数定义见 extract-i18n/schema.json选项归一化逻辑见 options.ts。参数默认值说明--build-target当前项目的 build 目标指定从哪个目标提取格式project:target[:configuration]--formatxlf输出文件格式--out-filemessages.xlf输出文件名随格式变化messages.xmb/messages.json/messages.arb--output-path工作区根目录输出文件所在目录不存在时自动创建--i18n-duplicate-translationwarning重复翻译的处理方式warning/error/ignore 默认格式为 XLIFFxlf这也是专业翻译平台最通用的交换格式。五、选择输出格式xlf、xlf2、json 还是 arbextract-i18n 支持 9 种格式schema.json由 builder.ts 中不同的序列化器实现xlf / xlif / xliff默认XLIFF 1.2 标准业界翻译交付首选xlf2 / xliff2更新的 XLIFF 2.0 版本jsonSimpleJson 格式结构直观适合程序化处理arbFlutter 生态通用的.arb文件xmb内部中间格式主要用于迁移legacy-migrate旧版消息 ID 迁移专用。对于常规 Web 项目选默认的xlf即可配合翻译平台流转最顺畅。六、翻译完成后构建内联多语言版本翻译文件就绪后按第三步配置了i18n.inline每次执行ng build时 CLI 就会把对应语言的译文内联进产物并按subPath输出到各语言子目录——一次构建多语言站点全部产出。翻译文件的加载与合并含 locale 不匹配告警、重复消息检查由 loadTranslations 完成。⚠️ 小技巧重复消息的严重程度可用--i18n-duplicate-translationerror设为报错即失败放进 CI 中可强制团队及时清理重复文案builder.ts。七、常见问题快速排查FAQ报错缺少angular/localize执行ng add angular/localize后重试。报错只能从 application 提取库项目projectType: library不支持 extract-i18n请指向 application 项目。警告 locale 不匹配翻译文件头部的src-lang与配置语言代码不一致请修正配置文件。找不到提取结果检查--output-path与--out-file组合默认文件为工作区根目录下的messages.xlf。仓库中的 e2e 用例 extract-ivy.ts 演示了真实项目上提取 xlf 的完整断言过程可作为行为参考。八、小结Angular CLI 的国际化工作流可以概括为一句话ng add angular/localize装依赖 →ng extract-i18n提消息 → angular.json 配 i18n 内联翻译 →ng build产出多语言站点。抓住这条主线再按需调整格式与重复翻译策略即可稳定支撑团队的多语言发布节奏。【免费下载链接】angular-cliCLI tool for Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Angular CLI 国际化 i18n 实战：extract-i18n 提取与翻译内联的完整工作流

相关推荐

kohya_ss LoRA训练实战教程：3 步在浏览器里跑通 AI 绘画模型训练

ops-transformer FlashAttentionScoreGrad 算子 Pytest 验证框架：CPU Golden、NPU 直调与精度对比实战

CANN 社区贡献基础设施 FAQ 实战指南：CLA 签署、PR 门禁与 Bot 命令合入全解析

更多资讯

UI设计师简历简洁排版全攻略：从Word设置到HTML/CSS模板

爱家居网页设计：生活场景驱动的前端工程实践

campus-imaotai 项目深度解析：i茅台每日自动预约系统的架构、业务流程与 Docker 部署实战

Word题注编号“图一.1”改“图1.1”的完整解决方案

Godot 碰撞层实战：500 颗子弹如何互不打架还照样撞得到人

珠宝设计系统提示词实战手册:按环节挑提示词,把 brief 变成可交付草图

今日更新

AReaL 调试指南：从 Agent Workflow 验证到分布式训练死锁诊断

MATLAB实现GPS L1 C/A信号仿真与二维捕获验证

彻底搞懂ASCII、Unicode与UTF-8：从乱码根源到编码实战

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？