Angular Components 版本演进全史：基于 CHANGELOG_ARCHIVE 解读 12.0.0 前的关键里程碑与破坏性变更
【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components
Angular Components（本仓库，项目根目录见 README.md）是 Angular 官方的组件基础设施（CDK）与 Material Design 组件库。本文以仓库根目录的 CHANGELOG_ARCHIVE.md 为唯一主线，完整梳理该项目从 2016 年2.0.0-alpha.0首次发布到 2021 年11.2.13的全部版本演进、核心亮点（Highlights）、破坏性变更（Breaking Changes）与升级实践，并结合 src 目录下的现有源码佐证这些历史决策在今天的落点。读完本文，你将掌握该组件库版本化的组织方式、历代重大能力升级的时间线，以及如何利用 changelog 指导 Angular 项目升级。
一、档案定位：CHANGELOG_ARCHIVE 与 CHANGELOG 的分界
仓库同时维护两份变更记录，CHANGELOG_ARCHIVE.md 的开头第一行就明确了其职责：
This contains changes before 12.0.0. See CHANGELOG.md for changes in 12.0.0+.
也就是说，这份归档文件是12.0.0 之前全部版本变更的完整档案，而 12.0.0 及之后的记录存放在 CHANGELOG.md（当前约 7500 行）。这种"主文件 + 归档文件"的分裂式组织方式在大型开源库中非常常见：主 changelog 保持精炼、面向近期升级，历史记录则整体移入归档，既避免文件无限膨胀，又保证审计与追溯的完整性。
从文件统计看，CHANGELOG_ARCHIVE.md 共记录了从2016-03-15 的2.0.0-alpha.0到2021-05-19 的11.2.13约 5 年间的全部发布，版本跨度覆盖 alpha 阶段、2.x、5.x、6.x、7.x、8.x、9.x、10.x、11.x（3.x/4.x 的发布已并入早期记录中）。每个版本条目还带有独特的代号（codename），例如11.2.13 "denim-doily"、10.0.0 "ice-dice"、7.0.0 amethyst-ammonite、2.0.0-alpha.0 titanium-octopus。这种"形容词-名词"的双词代号传统贯穿始终，成为该仓库版本史的一个标志性特征，便于在团队沟通与故障排查时精确指代某个发布。
二、变更记录的标准格式：读懂一张 changelog 表格
归档中每个版本的正文采用统一的"按包分区（cdk / material / google-maps / youtube-player / cdk-experimental / material-experimental）+ 表格化条目"结构。以11.2.13的 cdk 分区为例：
| 类型 | 说明 |
|---|---|
bug fix | 缺陷修复，是归档中占比最大的条目类型 |
feature | 新能力或新 API，常伴随closes #issue追溯需求来源 |
performance | 性能优化（如 10.1.0 中tooltip延迟挂载事件、ink-bar适配器改类对象） |
refactor | 内部重构（如 11.0.0 移除 core 中的月份常量） |
Breaking changes | 破坏性变更专区，或置于版本顶部单独成节 |
每个条目通常携带关联 issue 编号与被修复问题编号，例如10.1.1中**drag-drop:** warn if connected container ID doesn't exist ([#20057])。对于历史 patch 版本（如 11.2.1～11.2.13 的密集迭代），表格中大量bug fix集中在datepicker、select、menu、tabs、snack-bar等高频组件上，这反映出该库在稳定期内"以组件细粒度修复驱动发布"的节奏。
三、版本时间线总览：从 6 个组件到全功能组件库
根据归档内容可整理出以下主线时间线（所有日期均来自文档原文）：
| 版本 | 代号 | 发布日期 | 阶段要点 |
|---|---|---|---|
| 2.0.0-alpha.0 | titanium-octopus | 2016-03-15 | 首次发布（当时仓库名为 angular2-material），仅 6 个组件 |
| 2.0.0-alpha.9 | cobalt-kraken | 2016-09-26 | 打包统一为单一@angular/material包 |
| 5.0.0 | velvet-cuttlefish | 2017-12-06 | 稳定期，大量跨浏览器与无障碍修复 |
| 6.0.0 | vibranium-vivarium | 2018-05-03 | MatTree、原生<table>、schematics、MatBadge 等 |
| 7.0.0 | amethyst-ammonite | 2018-10-17 | drag-drop、虚拟滚动、2018 设计规范刷新 |
| 8.0.0 | osmium-octothorpe | 2019-05-28 | 经 beta/rc 多轮迭代的年度大版本 |
| 9.0.0 | tungsten-hombre | 2020-02-06 | cdk/testing 组件测试基础设施、google-maps、clipboard |
| 10.0.0 | ice-dice | 2020-06-24 | 日期范围选择器、清除历史弃用 API、node-sass 弃用 |
| 11.0.0 | nitrite-trilobite | 2020-11-11 | 切换 Sass@use模块系统，node-sass 支持结束 |
| 11.2.13 | denim-doily | 2021-05-19 | 11.x 系列最终维护版，随后进入 12.0.0 时代 |
归档还完整保留了 6.x、7.x、8.x、9.x、10.x 各系列的 beta/rc 迭代记录（如8.0.0-beta.0 spidersilk-barbell、7.0.0-rc.2、6.0.0-beta.5），说明每个大版本发布前都经历了多轮候选版验证——这是后文"升级节奏"讨论的事实基础。
四、起点：alpha 时代如何确立组件库的形态
4.1 首次发布的 6 个组件
2.0.0-alpha.0 "titanium-octopus"（2016-03-15）是归档的起点，文档原文明确标注"First release of angular2-material!"，首批发行的组件为：
md-button（按钮与链接锚点）md-cardmd-toolbarmd-sidenavmd-checkboxmd-progress-circle与md-spinner
归档原文同时给出了一条重要提示：alpha 阶段组件仍将快速演进，"There will be breaking changes between alpha releases"，alpha 版本面向希望提前体验、且对破坏性 API 变更高度容忍的开发者。今天这些组件的后继实现仍然存在于仓库的 src/material 各子目录（button、card、toolbar、sidenav、checkbox、progress-spinner 等），读者可以在当前源码中对照它们历经数代重构后的形态。
4.2 从多包到单包：@angular/material
2.0.0-alpha.9 "cobalt-kraken"（2016-09-26）是打包模型的分水岭。归档记载：
- 组件从分散的
@angular2-material/...包合并为单一@angular/material包； - 新增聚合模块
MaterialModule，包含全部组件；文档同时指出 rollup 等构建工具可通过对该模块做 tree-shaking 来剔除未使用组件的代码； - 引入theming 主题化（文档中链接指向当时的 theming 指南，本仓库现有对应指南 guides/theming.md）；
- 新增基础 focus-trap 指令与 interactivity checker（即今日 src/cdk/a11y 中 FocusTrap、InteractivityChecker 的前身）；
- dialog、snack-bar 等开始成型。
更早的2.0.0-alpha.8则记录了两项影响深远的工程决策：一是打包方式对齐 Angular 官方、各组件模块需通过forRoot()方式引导（例如MdCoreModule.forRoot()、MdRadioModule.forRoot()），这在后续版本中被 NgModule 的标准导入方式取代；二是overlay 改为同步 API——创建 overlay 不再返回 Promise。这两条在归档中被明确列为 Breaking Changes，体现了"早期激进、后期收敛"的 API 演化哲学。
五、6.0.0：生态整合与自动化迁移起点
6.0.0 "vibranium-vivarium"（2018-05-03）的 Highlights 区块是归档中最完整的大版本导读之一，核心内容包括：
MatTree组件正式可用（对应 src/material/tree）；<mat-table>与<cdk-table>在原有display: flex布局之外，新增原生<table>元素形态；MatTable同时支持可选的 footer row；- Schematics 正式引入（对应 src/material/schematics 与 guides/schematics.md），可自动生成与改造代码；
MatTabs支持懒加载内容；MatBadge、MatBottomSheet两个新组件上线；@angular/cdk/overlay新增FlexibleConnectedPositionStrategy定位策略，可智能处理尺寸与定位、确保浮层内容始终在屏幕内（对应 src/cdk/overlay）；MatIcon支持从字符串注册 SVG 图标；@angular/cdk/keycodes提供构建 Web 应用所需的绝大多数键码常量；- 累计130+ 缺陷修复。
更重要的是，6.0.0 首次在归档中给出了官方升级命令，这也是后续大版本（7.0、8.0、9.0、10.0、11.0）沿用的标准迁移姿势：
ng update @angular/material归档原文特别注明：在少数情况下工具可能无法自动迁移，但会明确提示这些 case。对仅使用 CDK 的项目，7.0.0 的升级说明补充了对应命令ng update @angular/cdk。这意味着从 6.x 起，"CLI 自动迁移 + 人工处理提示项"成为本组件库升级的既定工作流，今天依然可以在 guides/getting-started.md 中看到配套的起步引导。
六、7.0.0：交互能力与样式体系刷新
7.0.0 "amethyst-ammonite"（2018-10-17）把库的能力重心从"展示型组件"扩展到"交互基础设施"，Highlights 要点：
- Drag and Drop：
@angular/cdk/drag-drop提供拖拽能力（当前实现见 src/cdk/drag-drop，含 drop list、handle、preview、placeholder 等完整机制）； - Virtual Scrolling：
@angular/cdk/scrolling提供虚拟滚动（当前实现见 src/cdk/scrolling，含固定/可变尺寸两种虚拟滚动策略）； <mat-form-field>支持原生<select>元素；- 新增
<mat-action-list>（每一项都是<button>的列表）； - 全库组件样式对齐 2018 Material Design 规范刷新（本仓库保留的迁移说明见 guides/material-2.md）；
- schematics 扩展至 table、drag and drop、tree、address form 等；
ng add增加CLI 交互提示（HammerJS 支持、应用主题、动画配置）； - 累计250+ 缺陷/性能修复。
7.0.0 的 Breaking Changes 中有一条对样式体系影响深远：elevation（阴影）从组件样式表移出，未调用主题 mixin 的组件将不再自带投影阴影；自定义主题缺少elevation属性时仍会看到默认黑色阴影。归档为此给出了自定义组件复用主题化 elevation 的 mixin 写法：
@import '~@angular/material/theming'; $myTheme: ...; @mixin my-elevation($zValue) { @include mat-theme-elevation($zValue, $myTheme); }该版本还系统性地标记了一批预期在 v8 移除的弃用项，归档中逐条列出，例如：
- CDK Collections：
SelectionModel.onChange→SelectionModel.changed； - CDK Scrolling：
ScrollDispatchModule→ScrollingModule； - CDK Table：
CdkTable.setHeaderRowDef/setFooterRowDef→addHeaderRowDef/removeHeaderRowDef（这条在 10.0.0 中最终被移除，见下文）； - Material Dialog：
MatDialogRef.afterOpen→afterOpened、afterClose→afterClosed； - Material Form Field：
<mat-placeholder>→<mat-label>； - 大量组件构造函数的可选参数被预告将在 v8 变为必选。
从源码结构看，这些"弃用-移除"周期在 10.0.0 的 Breaking Changes 清单中得到了兑现（例如CdkTable.setHeaderRowDef被正式移除），可以视为该库"先标注弃用、隔一个大版本再删除"策略的直接证据。
七、9.0.0：测试基础设施、地图组件与剪贴板能力
9.0.0 "tungsten-hombre"（2020-02-06）标志着仓库定位从"Material 组件库"进一步扩展为"组件基础设施集合"（此前仓库已更名为 angular/components，项目描述即 "Component infrastructure and Material Design components for Angular"）。三大 Highlights 如下。
7.1 全新的@angular/cdk/testing组件测试 Harness
归档用一整段阐述了动机：过去测试组件依赖 CSS 选择器等实现细节，一旦组件库改动内部实现，所有依赖测试都要跟着改。9.0.0 引入组件 harness（测试装置），把实现细节抽象掉，使单元测试边界更清晰、更不易碎。
归档给出了同一测试在 harness 引入前后的对比，这是理解 harness 价值最直观的素材。改造前：
it('should switch to bug report template', async () => { expect(fixture.debugElement.query('bug-report-form')).toBeNull(); const selectTrigger = fixture.debugElement.query(By.css('.mat-select-trigger')); selectTrigger.triggerEventHandler('click', {}); fixture.detectChanges(); await fixture.whenStable(); const options = document.querySelectorAll('.mat-select-panel mat-option'); options[1].click(); // Click the second option, "Bug". fixture.detectChanges(); await fixture.whenStable(); expect(fixture.debugElement.query('bug-report-form')).not.toBeNull(); });改造后：
it('should switch to bug report template', async () => { expect(fixture.debugElement.query('bug-report-form')).toBeNull(); const select = await loader.getHarness(MatSelect); await select.clickOptions({text: 'Bug'}); expect(fixture.debugElement.query('bug-report-form')).not.toBeNull(); });harness 的日常使用与自建方法在本仓库 guides/using-component-harnesses.md 有完整说明。其底层实现就在 src/cdk/testing：ComponentHarness基类、HarnessEnvironment环境抽象、TestElement元素抽象，并分别提供 testbed、protractor、selenium-webdriver 三种运行环境子目录。后续版本（10.x、11.x）中持续为MatToolbar、MatCard、MatTooltip、MatTree、tab nav bar、原生 select/option 等补充 harness，测试体系的组件覆盖率在归档中逐年可见。
7.2 新包@angular/google-maps
9.0.0 将 Google Maps JavaScript API 封装为易用的 Angular 组件包@angular/google-maps（当前源码见 src/google-maps，包含 google-map、map-marker、map-info-window、map-polyline、map-directions-renderer 等一整套地图组件）。归档中该包由社区成员贡献，后续 10.x 为其补充了 ground overlay、底层 Google Maps 对象暴露、exportAs等能力。
7.3 新子包cdk/clipboard
新增@angular/cdk/clipboard子包（当前实现见 src/cdk/clipboard），提供操作剪贴板的便捷工具，同样源自社区贡献。注意 10.0.0 的 Breaking Changes 提到cdkCopyToClipboard的copied事件被重命名为cdkCopyToClipboardCopied——这正是该子包 API 在随后的版本中收敛的证据。
9.0.0 的 Breaking Changes 还包括一项工程性变更：不再直接依赖tslib，改列为peerDependency（与 Angular 框架保持一致）。未使用 Angular CLI 的用户需手动安装：
yarn add tslib # 或 npm install tslib --save八、10.0.0：清理历史包袱与新日期能力
10.0.0 "ice-dice"（2020-06-24）的 Highlights 只有两条，但信息密度极高：
- 一批此前已标记弃用的 API 被移除（详见下文清单）；
@angular/material新增日期范围选择器（date-range picker）——即<mat-date-range-picker>与MatDateRangeInput，相关实现位于 src/material/datepicker。
8.1node-sass弃用声明
10.0.0 正式宣布：对node-sass（基于 libsass）的支持被弃用，转而推荐更新更活跃的sass包。文档给出的理由是为启用新的 Sass 模块系统铺路——其相对旧的 import 机制有诸多优势。这一决策在 11.0.0 中落地执行（见下节）。
8.2 大规模 Breaking Changes 清单
10.0.0 的破坏性变更是归档中规模最大的之一，CDK 侧包括：
CdkDropList.start、drop、enter、exit、getItemIndex全部移除；CDK_DRAG_CONFIG_FACTORY移除；CdkTable.setHeaderRowDef/setFooterRowDef移除，改用addHeaderRowDef/removeHeaderRowDef（呼应 7.0.0 的弃用预告）；Platform构造函数的_platformId参数改为必选；cdkCopyToClipboard的copied事件更名为cdkCopyToClipboardCopied；CdkCopyToClipboard构造函数的_ngZone参数改为必选。
Material 侧最为醒目的是整套 HammerJS 手势相关 API 被移除：MAT_HAMMER_OPTIONS、GestureConfig、HammerInput、HammerStatic、Recognizer、RecognizerStatic、HammerInstance、HammerManager、HammerOptions全部删除。同时移除的还有：
MatButtonToggleGroupMultiple（改用MatButtonToggleGroup）；MatSlideToggleDefaultOptions.disableDragValue、MatSlideToggle.dragChange，以及MatSlideToggle构造函数中的_ngZone、_dir参数；MatAutocompleteTrigger、MatIcon、MatIconRegistry、MatSlider、MatSortHeader、MatTooltip等多个组件的构造函数参数改为必选或移除。
这套"构造器参数必选化"与"手势库解耦"的调整，正是 7.0.0 弃用预告的集中兑现。对仍在使用 HammerJS 的项目，本仓库提供了专项迁移指南 guides/v9-hammerjs-migration.md 说明移除后的替代方案。
九、11.0.0：全面切换 Sass 模块系统
11.0.0 "nitrite-trilobite"（2020-11-11）的 material 分区开篇即给出结论：10 版本中被弃用的node-sass 支持至此正式结束，库全面切换到新版 Sass 模块系统（@use语法），使 Sass 实现与生态最佳实践保持一致；文档同时指明sassnpm 包由官方 Sass 团队维护、可作为 API 兼容的替代。
该版本还包含若干 Breaking Changes：
matSnackBarHarness.getRole()被getAriaLive()取代——因为 snack-bar 改用aria-live而非alert/statusrole；@angular/material/core中已弃用的月份常量被移除（这些常量过去属于内部测试用途却被误发布到了公开 API）。
11.0.0 的功能条目同样值得关注：cdk 侧为 overlay 的 connected-overlay 指令增加禁用 Esc 关闭的输入、CdkVirtualForOf支持Set、table 支持固定布局（fixed layout）与"无数据行"注册 API、testing 支持右键点击与派发任意事件；material 侧为 autocomplete、select、tabs、stepper、tree 等大量组件补充默认配置与 test harness（如MAT_TABS_CONFIG配置dynamicHeight、MatTreeHarness.getTreeStructure）。此后 11.1.x、11.2.x 系列以 patch 迭代收尾（如 11.2.13 修复 a11y 焦点恢复、overlay 辅助按钮点击、testing 复合选择器祖先处理等问题），为 12.0.0 时代划上句号。
十、从归档中提炼的升级与迁移方法论
结合各版本的结构，可以把这份归档当作一份可操作的升级手册来使用：
- 确认所在版本与目标版本：在 CHANGELOG_ARCHIVE.md 中找到当前版本与目标版本的条目，重点阅读
Highlights与Breaking Changes两节。 - 优先使用 CLI 自动迁移：6.0.0 起的大版本升级统一使用
ng update @angular/material（纯 CDK 项目用ng update @angular/cdk）；对于工具无法自动处理的 case，归档明确说明会给出提示。 - 追踪弃用预告周期：本库的节奏通常是"某大版本标记 deprecated → 下一个大版本移除"。例如
CdkTable.setHeaderRowDef于 7.0.0 弃用、10.0.0 移除；MAT_HAMMER_OPTIONS等 HammerJS API 与node-sass支持也在 10.0.0 被清理。升级前先扫描自己项目中是否还在使用这些"预告死亡"的 API。 - 对照源码验证新 API 形态：归档中提到的每个组件、harness 与子包，都能在当前仓库源码中找到对应实现——例如测试基础设施在 src/cdk/testing、拖拽与虚拟滚动在 src/cdk/drag-drop 与 src/cdk/scrolling、日期范围选择器在 src/material/datepicker、schematics 在 src/material/schematics。升级后可用这些目录快速确认 API 签名是否已变更。
- 善用配套迁移指南：仓库 guides 目录保留了
v9-hammerjs-migration、material-2、schematics、theming、using-component-harnesses等文档，它们与归档中的 Breaking Changes 一一对应，是逐条落地迁移的官方参考。
十一、结语
CHANGELOG_ARCHIVE.md 不只是一份历史流水账，它完整记录了一个大型 Angular 组件库"从 alpha 的 6 个组件，到单一@angular/material包，再到 CDK 测试基础设施、拖拽/虚拟滚动、Google Maps 封装与自动化 schematics"的整个演进轨迹，也忠实呈现了每一轮破坏性变更背后的工程权衡：弃用先行、大版本清算、CLI 自动化迁移兜底。理解这份归档的阅读方法，不仅有助于当前仓库的版本追溯，也能为你在自己的 Angular 项目中规划升级路径提供一套可复用的方法论。
【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
