npm ng-zorro-antd 9.0.0
on Node.js NPM

latest releases: 19.1.0, 19.0.2, 19.0.1...
4 years ago

Intro

Welcome to the 9.0.0 version of ng-zorro-antd,some APIs were deprecated in version 8.x, and warning message was given under dev mode. All deprecated APIs is removed in 9.0.0, if you have fixed all warnings in the 8.x version, you can follow these steps to upgrade your version.

Before upgrade

  1. Make sure Node.js >= 10.13
  2. Create a new branch, or use other methods to back up the current project
  3. delete the package-lock.json file

Upgrade dependencies

  • Upgrade Angular to 9.x version, ref https://update.angular.io/
  • Run ng update @angular/cdk, if you have used @angular/cdk.
  • if you have used date-fns in your project, upgrade it to 2.x version, ref https://github.com/date-fns/date-fns-upgrade.
  • if you have used monaco-editor please upgrade it to 0.2.x, don't forget to upgrade monaco-editor-webpack-plugin to 1.9.x if you have used it.

Upgrade NG-ZORRO

  • Run ng update ng-zorro-antd
  • If a warning message appears in the console, follow the prompts to modify the corresponding code

date-fns update

We have upgraded date-fns to v2. When you switch to date-fns, some date formats will have a breaking change. Such as: 

<!-- datefns v1 -->
<nz-date-picker nzFormat="YYYY-MM-DD"></nz-date-picker>

<!-- datefns v2 -->
<nz-date-picker nzFormat="yyyy-MM-dd"></nz-date-picker>

We recommend using date-fns v2 date format. If you don't want to use the new date format, you can use NZ_DATE_FNS_COMPATIBLE. When set to true, ng-zorro-antd will convert the format of v1 to v2. See the comparison of the old and new formats here. 

providers: [
  { provide: NZ_DATE_FNS_COMPATIBLE, useValue: true }
]

Note: NZ_DATE_FNS_COMPATIBLE won't be kept for too long, we will remove the support for date-fns v1 format until ng-zorro-antd v10, we hope you can update the date-fns date format in time. For date-fns upgrade guide, see here.

Angular Ivy Supported

We have upgraded the @angular/* and @angular/cdk versions to v9, and now you can use the Ivy rendering engine to run your project, and enable the strictTemplates option to use more strict template type checking.

More help go to Angular Ivy and Template type checking.

Ant Design 4 Spec

We have synced the Ant Design 4 design specification and support the Dark and Compact themes.

Enhanced Performance and Usability

  • In previous versions, the Table component has integrated virtual scrolling, also now supported for Select and Tree components.
  • Form and Table simplify usage and now allow for writing fewer templates and configurations.
  • Allow adding icons in sub-modules to reduce the first screen load time.
  • Now, the pop-up menu is automatically closed when the route is changed, and corresponding options have been added for components such as Modal.

Features

Bug Fixes

Performance Improvements

  • checkbox: use css empty selector instead of observeContent (#4761) (da8821a)
  • input: improve input-group perf (7af643b), closes #3950
  • radio: refactor radio group data flow (#4770) (423a382)

BREAKING CHANGES

Note: All break changes are warned in the latest version of 8.x, if you have fixed all warnings in 8.x, there will no break changes for you.

  • form:
    • nz-form-extra is removed. Please use nzExtra is nz-form-control instead.
    • nz-form-explain is removed. Please use nzSuccessTip | nzWarningTip | nzErrorTip | nzValidatingTip is nz-form-control instead.
  • input-number:
    • ngModelChange trigger at once when user typing
  • pagination:
    • prev_5 and next_5 is needed when use nzItemRender
    • 'pre' typo was corrected to 'prev'
  • tree, tree-select:
    • Removed [nzDefaultExpandAll] use [nzExpandAll] instead.
    • Removed [nzDefaultExpandedKeys] use [nzExpandedKeys] instead.
    • Removed [nzDefaultSelectedKeys] use [nzSelectedKeys] instead.
    • Removed [nzDefaultCheckedKeys] use [nzCheckedKeys] instead.
    • Removed (nzOnSearchNode) use (nzSearchValueChange) instead.
    • Removed [nzDefaultExpandedKeys] use [nzExpandedKeys] instead.
  • message,notification:
    • NZ_MESSAGE_CONFIG is removed. Please use NzConfigService instead.
    • NZ_NOTIFICATION_CONFIG is removed. Please use NzConfigService instead.
    • config method of NzMessageService and NzNotificationService is removed. Please use set method of NzConfigService instead.
  • empty:
    • NZ_DEFAULT_EMPTY_CONTENT is removed. Please use NzConfigService instead.
  • carousel:
    • nzVertical is removed. Please use 'nzDotPosition' instead.
  • icon:
    • NZ_ICON_DEFAULT_TWOTONE_COLOR is removed. Use NzConfigService instead.
    • i[nz-icon]: twoToneColor theme spin iconfont type inputs has been removed, use nzTwoToneColor nzTheme nzSpin nzIconfont nzType instead.
    • i.anticon selector has been removed, use i[nz-icon] instead.
  • calendar:
    • <nz-calendar> nzCard input has been removed, use nzFullscreen instead.
  • tooltip,popover,popconfirm:
    • <nz-tooltip> <nz-popover> <nz-popconfirm> components has been removed, use its directives instead.
  • Removed deprecated API NgZorroAntdModule.forRoot()

版本介绍

欢迎来到 ng-zorro-antd 的 9.0.0 版本，升级到最新版本之后，开发者不仅可以享受到最新版本 Angular 的支持，还可以获得最新特性和更好的性能。

ng-zorro-antd 的部分 API 在 8.x 版本进入弃用状态，并且在开发环境中给出了警告提醒，所有之前弃用 API 在 9.0.0 不再支持，如果你之前已经根据告警信息修改了对应组件的使用方式，那么 9.0.0 版本升级不会有任何障碍，请按照以下步骤进行。

开始升级之前

  1. 首先确保你 Node.js >= 10.13
  2. 创建新的分支，或者使用其他方式备份当前项目
  3. 删除项目下 package-lock.json 文件

升级相关依赖

  • 升级 Angular 主版本号至 9.0.0 版本，可以参考 https://update.angular.io/
  • 如果你有单独使用 @angular/cdk 请执行 ng update @angular/cdk
  • 如果你有单独使用 date-fns 请先升级到 2.x，升级指南
  • 如果你有使用 monaco-editor 请先升级到 0.2.x, 使用 monaco-editor-webpack-plugin 时请将其升级到 1.9.x

升级 NG-ZORRO

  • 运行 ng update ng-zorro-antd
  • 如果控制台出现警告消息请按提示修改对应代码

date-fns 升级指南

当你切换至 date-fns 时，一些日期格式会有 breaking change。比如： 

<!-- datefns v1 -->
<nz-date-picker nzFormat="YYYY-MM-DD"></nz-date-picker>

<!-- datefns v2 -->
<nz-date-picker nzFormat="yyyy-MM-dd"></nz-date-picker>

我们推荐使用 date-fns v2 的日期格式。如果你不想使用新日期格式，你可以用 NZ_DATE_FNS_COMPATIBLE ，当设置为 true 时，ng-zorro-antd 会把 v1 的格式转为 v2，新旧格式的对比看这里。 

providers: [
  { provide: NZ_DATE_FNS_COMPATIBLE, useValue: true }
]

但 NZ_DATE_FNS_COMPATIBLE 不会保留太久，到 ng-zorro-antd v10 将会移除对 date-fns v1 日期格式的支持，希望你能及时更新 date-fns 日期格式。关于 date-fns 升级指南看这里，如果业务中使用了 date-fns，可以参考 date-fns 官方兼容工具 查看。

新版本特性

支持 Angular Ivy

我们已经将 @angular/* 和 @angular/cdk 版本升级到 v9，现在你可以使用 Ivy 渲染引擎运行你的项目，并且开启 strictTemplates 选项使用更严格的的模版类型检查。

获取更多帮助请前往 Angular Ivy 和 Template type 查看。

Ant Design 4 设计规范

我们已经同步了 Ant Design 4 设计规范，并且添加了暗黑(Dark)和紧凑(Compact) 主题支持。

性能和易用性增强

  • 在之前的版本中 Table 组件已经集成了虚拟滚动，现在 Select 和 Tree 也同样支持；
  • Form 和 Table 简化了使用方式，现在可以编写更少的模版和配置；
  • 允许在子模块中添加图标，以减少首屏加载时间；
  • 现在当路由改变时弹出菜单将自动关闭，同时为 Modal 等组件添加了对应选项；

Features

Bug Fixes

Performance Improvements

BREAKING CHANGES

注意： 所有不兼容改动均在 8.x 最新版本中给出了 warning，如果你在 8.x 最新版本中修复了所有 warning，9.x 可以直接升级的。

  • calendar:
    • <nz-calendar> nzCard 被移除了, 请使用 nzFullscreen 代替。
  • carousel:
    • nzVertical 被移除，请使用 'nzDotPosition' 代替。
  • empty:
    • NZ_DEFAULT_EMPTY_CONTENT 被移除，请使用 NzConfigService 代替。
  • form:
    • nz-form-extra 被移除，请使用 nz-form-control 中的 nzExtra 代替。
    • nz-form-explain 被移除，请使用 nz-form-control 中的 nzSuccessTip | nzWarningTip | nzErrorTip | nzValidatingTip 代替。
  • icon:
    • i[nz-icon]: twoToneColor theme spin iconfont type 输入被移除, 请使用 nzTwoToneColor nzTheme nzSpin nzIconfont nzType 代替。
    • i.anticon 被移除, 请使用 i[nz-icon] 代替。
    • NZ_ICON_DEFAULT_TWOTONE_COLOR 被移除， 请使用 NzConfigService。
  • input-number:
    • ngModelChange 会在用户输入时立刻触发
  • message,notification:
    • NZ_MESSAGE_CONFIG 被移除，请使用 NzConfigService 代替。
    • NZ_NOTIFICATION_CONFIG 被移除，请使用 NzConfigService 代替。
    • config method of NzMessageService and NzNotificationService 被移除，请使用 set method of NzConfigService 代替。
    • 用 NzMessageRef 替换 NzMessageDataFilled
    • 用 NzNotificationRef 替换 NzNotificationDataFilled
  • pagination:
    • 当定制 nzItemRender 时，需要考虑 prev_5 and next_5
    • 'pre' 被修改为 'prev'
  • tree, tree-select:
    • 移除了 [nzDefaultExpandAll] 请使用 [nzExpandAll] 代替。
    • 移除了 [nzDefaultExpandedKeys] 请使用 [nzExpandedKeys] 代替。
    • 移除了 [nzDefaultSelectedKeys] 请使用 [nzSelectedKeys] 代替。
    • 移除了 [nzDefaultCheckedKeys] 请使用 [nzCheckedKeys] 代替。
    • 移除了 (nzOnSearchNode) 请使用 (nzSearchValueChange) 代替。
  • tooltip,popover,popconfirm:
    • <nz-tooltip> <nz-popover> <nz-popconfirm> 组件被移除, 请使用对应的 directives 代替。
  • 移除 API: NgZorroAntdModule.forRoot()
Check out latest releases or
releases around ng-zorro-antd 9.0.0

Don't miss a new ng-zorro-antd release

NewReleases is sending notifications on new releases.

Get notifications