NG-ZORRO
阿里 / 蚂蚁主导、Ant Design 在 Angular 生态的官方实现、国内 Angular 中后台 UI 库行业事实标准——由 阿里巴巴计算平台事业部 与 蚂蚁集团 共同发起、由 NG-ZORRO 团队（核心成员来自阿里 / 蚂蚁 / ThoughtWorks 等大厂）于 2017 年 在 GitHub 开源（仓库 NG-ZORRO/ng-zorro-antd），是 Ant Design 设计语言 在 Angular 阵营唯一具备阿里官方背书 的实现。NG-ZORRO 版本号严格跟随 Angular 框架 major 版本号——v17 → v18 → v19 → v20 → v21、每年 5 月 / 11 月跟随 Angular 大版本发布，截至 2026 年 5 月最新稳定版为 v21.2.2（2026-04-13 发布、Angular ^21.0.0）。NG-ZORRO 完全基于 Angular 17+ Standalone Components（v15 后正式 standalone 默认、v20+ 完全 standalone-only）+ TypeScript 5+ + Less 4 + Zoneless / OnPush 双模式（v18+ 支持 Angular Zoneless 实验特性、所有组件默认 OnPush 变更检测、性能与体积兼优）+ Ant Design 设计规范同步（与 React 阵营 ant-design/ant-design 共享同一份设计语言、定期 sync spec）。核心生态矩阵：ng-zorro-antd（70+ 高质量 Angular 组件、覆盖 General / Layout / Navigation / Data Entry / Data Display / Feedback / Other 7 大类、Ant Design 视觉与 React 版本高度一致）/ @ant-design/icons-angular（图标库、<nz-icon nzType="..." nzTheme="outline | fill | twotone">、支持 iconfont.cn 远程加载）/ ng-zorro-antd-mobile（移动端配套、Ant Design Mobile 的 Angular 实现）/ ng-alain（NG-ZORRO 配套的中后台完整脚手架、国内 Angular 中后台事实标准模板）/ VSCode 扩展 ng-zorro-vscode-helper（官方 IDE 支持、组件 / API 智能提示）。核心特性：ng add ng-zorro-antd 一键集成 schematic（自动安装包 + 修改 angular.json + 注入主题 Less + 注入 i18n + 注入 animations + 注入 NzIconModule + 注入 NzConfigService）/ ng generate ng-zorro-antd:dashboard | form | list | tree-view | sidemenu 5 大模板（一行命令生成可用的 dashboard / form / list / tree-view / 侧边菜单完整模块）/ Standalone Component imports（import { NzButtonModule } from 'ng-zorro-antd/button'、按组件按需引入、Tree Shaking 极致友好）/ provideNzI18n(zh_CN) i18n 一行启用（60+ 语言包、NzI18nService.setLocale() 运行时切换 / NZ_DATE_LOCALE 配合 date-fns 日期 locale）/ Less 变量主题定制（400+ Less 变量、@primary-color / @border-radius-base / @font-size-base 等、4 套内置主题：default / dark / compact / aliyun）/ CSS Variables 实验性主题（ng-zorro-antd.variable.min.css + NzConfigService.set('theme', { primaryColor }) 运行时切换、零编译）/ provideNzConfig() + NzConfigService 全局组件配置（每个组件可设全局默认 props、message: { nzTop: 120 } / notification: { nzTop: 240 } / button: { nzSize: 'large' }）/ NzModalService + NzMessageService + NzNotificationService + NzDrawerService 反馈服务四件套（命令式 API、modal.create({ nzContent: MyComponent }) 支持动态组件）/ <nz-icon> 图标按需注册（provideNzIcons([StarFill, EditOutline]) 静态注册 + Tree Shaking 友好 + lazy 路由 provideNzIconsPatch()）/ NzTable 企业级数据表（columns + sort + filter + 多选 + 展开 + 树形 + 固定列 + 虚拟滚动 nzVirtualItemSize、server-side nzQueryParams 一站式）/ NzForm + Angular Reactive Forms 深度集成（formGroup + formControlName + nz-form-item + nz-form-control + nzErrorTip / nzHasFeedback、与 Angular 官方表单 API 无缝）/ 完整 SSR (Angular SSR / Angular Universal) 支持（provideClientHydration + provideAnimationsAsync() + SSR 友好）/ 完整 RTL 支持（<nz-config-provider> + dir="rtl"、所有组件天然适配）/ 完整 TypeScript 严格类型（每个组件 input / output / instance method 都有 TS 类型、Angular Signals 友好）/ OnPush 全组件（所有组件默认 OnPush 变更检测、性能极佳、但用户必须遵循 immutable 数据更新：this.data = [...this.data, newItem] 而非 this.data.push(newItem)）。典型用户群：阿里巴巴 / 蚂蚁集团 / 阿里云（阿里系内部 Angular 项目几乎全用 NG-ZORRO）/ ThoughtWorks（海外咨询公司、企业项目）/ 招商银行（国内金融 Angular 项目）/ Apache 多个项目（Apache 基金会下用 Angular 的官网 / 后台）/ 国内大量 Angular 中后台 / ERP / CRM 项目 —— 如果一个国内 Angular 中后台前端从未用过 NG-ZORRO，他几乎不可能在 Angular 阵营生存。截至 2026 年 5 月的 v21.2.2 处于「稳定演进期」，从 v17 standalone 默认 → v18 Zoneless 实验 → v19 <nz-icon> 新标签 + provideNzIcons → v20 全 standalone-only → v21 跟随 Angular 21 完善 Zoneless 支持，与 Angular 框架同节奏——这是 Angular 中后台项目里唯一阿里官方背书、与 Angular 版本对齐、与 React 版 Ant Design 视觉一致、企业可放心选用 9 年的 UI 库。
评价
优点
- 阿里官方背书 + Ant Design 视觉同步：NG-ZORRO 是 Ant Design 设计语言在 Angular 阵营唯一阿里官方背书的实现——与 React 版本
ant-design/ant-design共享同一份设计 spec、定期 sync 升级，国内中后台技术栈跨阵营协作时（前端 React + 后台 Angular）视觉天然一致 - 与 Angular 版本号严格对齐：v17 / v18 / v19 / v20 / v21 跟随 Angular Major、版本可预测、不会脱节——不像某些社区库版本落后 Angular 框架一两个 major
- 70+ 高质量组件覆盖完整业务场景：General（Button / Icon / Typography / FloatButton）+ Layout（Grid / Flex / Splitter / Space / Divider）+ Navigation（Menu / Breadcrumb / Tabs / Pagination / Steps / Anchor / Dropdown / PageHeader）+ Data Entry（18 个组件：Form / Input / Select / DatePicker / Cascader / Transfer / TreeSelect / Upload 等）+ Data Display（21 个组件：Table / Tree / List / Descriptions / Card / Statistic / Calendar / QRCode 等）+ Feedback（Message / Modal / Notification / Drawer / Alert / Spin / Result / Skeleton / Popconfirm / Progress）+ Other（Affix / Watermark）—— 企业级 CRUD / 后台 / 数据可视化场景全部开箱即用
ng add ng-zorro-antdschematic 一键集成：单条命令完成所有配置——安装包 + 修改angular.json注入 less 主题 + 注入 i18n locale + 注入 animations + 注入 NzIconModule + 配置 NzConfigService——零手动配置、新人 30 秒上手ng generate ng-zorro-antd:dashboard | form | list | tree-view | sidemenu5 大模板：一行命令生成可用模块——Dashboard 仪表板 + Form 表单 + List 列表 + TreeView 树视图 + Sidemenu 侧边菜单——5 大企业级模板覆盖 80% 起手场景- Standalone Component 默认 + Tree Shaking 极致：Angular 17+ standalone API、NG-ZORRO 全组件支持——
import { NzButtonModule } from 'ng-zorro-antd/button'+imports: [NzButtonModule]——按组件按需引入、Tree Shaking 友好、不再需要 NgModule 包装 - Less 4 主题定制 400+ 变量：
@primary-color/@border-radius-base/@font-size-base/@text-color等 400+ 变量、4 套内置主题（default / dark / compact / aliyun）——ng-zorro-antd/ng-zorro-antd.lessimport 后覆盖变量即可、配合@angular-builders/custom-webpack的modifyVars编译时定制 - CSS Variables 实验性主题：
ng-zorro-antd.variable.min.css+NzConfigService.set('theme', { primaryColor })——运行时主题切换、零编译、--ant-*CSS Variables——v17+ 实验、v21 稳定可用 provideNzI18n(zh_CN)一行启用 i18n：60+ 语言包（zh_CN / zh_HK / zh_TW / en_US / en_GB / ja_JP / ko_KR / de_DE / fr_FR / es_ES / pt_BR / ru_RU / ar_EG / fa_IR / he_IL 等）+NzI18nService.setLocale()运行时切换 +NZ_DATE_LOCALE配合 date-fns 日期 locale——国际化项目零额外工作provideNzConfig() + NzConfigService全局组件配置：每个组件可设全局默认 props——message: { nzTop: 120 }/notification: { nzTop: 240 }/button: { nzSize: 'large' }/select: { nzBackdrop: true }——整个 App 的全局风格只在这一处声明、配合NzConfigService.set()运行时动态调整NzModalService + NzMessageService + NzNotificationService + NzDrawerService反馈服务四件套：命令式 API、modalService.create({ nzContent: MyDynamicComponent, nzData: { id: 123 } })支持动态组件注入、NzModalRef控制生命周期——比模板式弹层灵活<nz-icon>按需注册 + Lazy 路由优化：provideNzIcons([StarFill, EditOutline])静态注册仅引入用到的图标 + Tree Shaking 极致友好 + lazy 路由provideNzIconsPatch()局部增量注册 + iconfont.cn 远程加载 + 自定义 SVG namespace 注册NzTable企业级数据表全特性：columns 配置 + nzSort 排序（client + server） + nzFilter 筛选 + nzShowCheckbox 多选 + nzExpand 展开 + 树形 + nzLeft/nzRight 固定列 + nzScroll 横纵滚动 +nzVirtualItemSize虚拟滚动 +(nzQueryParams)服务端分页/排序/筛选统一事件——一站式覆盖NzForm+ Angular Reactive Forms 深度集成：<form [formGroup]>+<nz-form-item><nz-form-label nzFor>+<nz-form-control [nzErrorTip]>——与 Angular 官方表单 API 无缝、不需要额外学第三方表单库- OnPush 全组件 + Zoneless 友好：所有组件默认
ChangeDetectionStrategy.OnPush——性能极佳、配合 Angular 18+ Zoneless 实验特性可完全移除 Zone.js - 完整 SSR 支持：Angular SSR / Angular Universal +
provideClientHydration+provideAnimationsAsync()—— SSR 友好、hydration 无 mismatch - 完整 TypeScript 严格类型：每个组件 input / output / instance method 都有 TS 类型、Angular Signals 友好（v17+
input()/output()signal API、v19+ resource API）—— NG-ZORRO 与 Signals 配合非常顺畅 ng-alain中后台完整脚手架：ng-alain.com 国内 Angular 中后台事实标准模板——基于 NG-ZORRO + Angular CLI + ACL 权限 + 国际化 + 主题切换、对标 ant-design-pro 在 Angular 阵营的实现- 完整中英文文档 + Demo 可改可跑：ng.ant.design/docs/introduce/zh——示例完整、API 表格清晰、CodeSandbox 在线编辑，国内开发者无英文壁垒
- 持续迭代：v17 standalone / v18 Zoneless 实验 / v19
<nz-icon>新标签 + provideNzIcons / v20 全 standalone-only / v21 跟随 Angular 21 完善（2025-2026 年），每个 major 都有清晰路线图、不像某些社区库无声死亡
缺点
- 国内 Angular 市场份额远不如 React / Vue：国内 Angular 项目本来就少（90% 中后台是 Vue + Ant Design Vue / Element Plus、React 用 Ant Design）——NG-ZORRO 国内人才储备稀缺、招聘市场窄、培训资源相对少
- Angular 学习曲线本身陡：Angular 17+ standalone 简化了一部分但 DI / Decorators / Signals / RxJS / Zoneless / Change Detection / Module 概念多——新人 1-2 周才能上手 Angular 本身、再加 NG-ZORRO 又是一周
- Bundle 体积偏大：完整
ng-zorro-antd引入后 bundle ~400-500KB（已 gzip），比 Naive UI / Mantine 偏重——必须 Tree Shaking + standalone import + lazy 路由 +provideNzIconsPatch()按需引入 - Less 编译依赖：NG-ZORRO 主题定制必须编译 Less——
@angular-builders/custom-webpack配modifyVars或手写 Less import 覆盖、纯 SCSS / Tailwind 项目集成 Less 是额外负担 - 图标必须显式注册：
@ant-design/icons-angular700+ 图标但必须provideNzIcons([...])注册——忘记注册时图标显示空白、新人最高频踩坑（v19+<nz-icon>新标签改善了部分体验） NzConfigService与静态服务方法的混合 API：NzModalService.create()是 DI 服务、但部分配置（如nzWidth）又通过NzConfigService全局设——两套配置入口、新人容易混淆优先级- OnPush 强制 immutable 数据更新：所有组件 OnPush 模式——
this.data.push(newItem)不会触发更新、必须this.data = [...this.data, newItem]——文档反复强调但仍是最高频「数据不更新」bug - vs Angular Material：Angular Material Google 官方背书 + Material Design +
@angular/cdk行为底座；NG-ZORRO 阿里背书 + Ant Design + 国内中后台主流、组件库更全（含 ng-alain） —— 国内中后台选 NG-ZORRO、海外或 Material 风格选 Angular Material - vs PrimeNG：PrimeNG 300+ 组件、Premium 模板付费、社区活跃；NG-ZORRO 70+ 精品组件 + Ant Design 视觉 + ng-alain 配套 —— PrimeNG 给「更多组件」、NG-ZORRO 给「Ant Design 一致体验 + 阿里背书」
- vs Ant Design (React 版本)：Ant Design React 版 国内 React 中后台事实标准、社区更活跃；NG-ZORRO 同 Ant Design 视觉、阿里背书在 Angular 阵营 —— 跨阵营对比、视觉一致、各自生态主力
- CSS Variables 主题仍标记 Experimental：
ng-zorro-antd.variable.min.css是实验特性、文档明确标 "Experimental"——生产环境建议 Less 编译时定制、不要依赖 runtime CSS Variables 切换 - Less 4 不支持 CSS Nesting / Container Queries：现代 CSS 特性需在 Less import 后通过 PostCSS 处理、与现代 Tailwind 4 / @import-glob 等工具集成有学习成本
ng-alain学习曲线：ng-alain在 NG-ZORRO 之上又封了一层（权限 / 布局 / 主题切换 / 内置服务模式）——用熟之后效率倍增、但初学者从 NG-ZORRO 跳到 ng-alain 有适应期- mobile 版本相对落后：
ng-zorro-antd-mobile更新频率不如主仓库、移动端 Angular 项目国内本来少、海外移动端 Angular 项目几乎不存在——移动端慎选 - 学习曲线：基础组件简单、
NzConfigService中等、NzModalService.create({ nzContent: DynamicComponent })动态组件较陡、整体新人 3-5 天上手基础、1-2 周熟练动态服务 + 主题
文档地址
NG-ZORRO 官网 | 中文文档 | 开始使用 | Schematics | 定制主题 | Dynamic Theme | 国际化 | 全局配置 | v21 升级指南 | FAQ | 组件总览 | ng-alain 中后台脚手架 | Angular 框架主站 | Ant Design 设计规范
GitHub 地址
NG-ZORRO/ng-zorro-antd（主仓库、9.1k+ Star、最新 v21.2.2） | angular/angular（Angular 框架主仓） | ant-design/ant-design-icons（图标库源） | ng-alain/ng-alain（中后台脚手架） | NG-ZORRO/ng-zorro-antd-mobile（移动端配套） | NG-ZORRO/vscode-ng-zorro-antd-helper（VSCode 扩展）
学习路径
- 入门：Angular 17+ standalone 前置 /
ng add ng-zorro-antdschematic 一键集成 / schematic 选项（--themeLess 主题选择 +--i18nlocale +--animations+--template模板）/ 第一个<button nz-button nzType="primary">/provideNzI18n(zh_CN)中文 i18n /provideNzIcons([...])图标注册 / Standalone Component 按需 import /provideAnimationsAsync()动画配置 / Less 主题文件结构 / TypeScript 基础（Signals 友好）/ng serve启动验证 / 暗色主题一行启用（ng-zorro-antd.dark.min.css） - 指南：核心：NG-ZORRO 70+ 组件全景（General / Layout / Navigation / Data Entry / Data Display / Feedback / Other 7 大类）/
<nz-form>+ Reactive Forms 完整方案（formGroup+nz-form-item+nz-form-control+nzRequired+nzErrorTip+nzHasFeedback+nzLayout三模式）/<nz-table>完整 API（columns + sort + filter + selection + expandable + tree + fixed columns + scroll + virtual scroll + server-sidenzQueryParams）/<nz-modal>+NzModalService完整（命令式 create / info / success / error / warning / confirm + 动态组件注入nzContent: MyComponent）/<nz-drawer>+NzDrawerService/NzMessageService+NzNotificationService反馈服务 /<nz-icon>完整图标方案（provideNzIcons静态注册 +provideNzIconsPatchlazy 路由 + iconfont.cn + custom SVG namespace + 主题 outline/fill/twotone + nzSpin/nzRotate 动画）/ Less 主题定制完整方案（400+ 变量 + 4 套内置主题 +@angular-builders/custom-webpackmodifyVars）/ CSS Variables 实验主题（ng-zorro-antd.variable.min.css+NzConfigService.set('theme', { primaryColor })） / 暗色 + 紧凑 + Aliyun 主题 /provideNzI18n() + NzI18nService完整 i18n（60+ locale + 运行时切换 +NZ_DATE_LOCALE+ date-fns 适配）/provideNzConfig() + NzConfigService全局组件配置（每组件全局 defaults + 运行时动态调整 + 优先级机制） /ng generate ng-zorro-antd:dashboard | form | list | tree-view | sidemenu5 大模板 / Standalone Component import 最佳实践 /provideAnimationsAsync()vsprovideAnimations()/ Angular SSR (Angular Universal) / Angular Router 集成（NzMenuItem + routerLink+NzBreadcrumb + nzRouteLabel）/ 常见踩坑（OnPush 数据 immutable 更新 / Less 编译失败 / 图标未注册显示空白 /NzConfigService与组件 prop 优先级 / Tailwind 优先级冲突 / SSR style flicker） - 参考：API 速查：NG-ZORRO 70+ 组件分类清单（General 4 / Layout 6 / Navigation 8 / Data Entry 18 / Data Display 21 / Feedback 10 / Other 2） / Less 变量速查（颜色 / 字号 / 圆角 / 间距 / 边框 / 阴影） / CSS Variables 速查（
--ant-*） /NzConfig完整选项树 /provideNzI18n+NzI18nServiceAPI /provideNzIcons+provideNzIconsPatch+NzIconServiceAPI /NzModalService + NzDrawerService + NzMessageService + NzNotificationServiceAPI /ng add/ng generateschematics 全表 / 60+ 语言包速查 / TypeScript 核心类型（NzSafeAny/NzSizeLDSType/NzStatus/NzTableQueryParams/NzModalRef）