Ng-zorro-antd: Ant design 4.0 & Angular 9.0 sync

[vthinkxie]

Ant design 4.0 & Angular 9.0 sync

Current in Beta

Latest version: 9.0.0-beta.3
https://next.ng.ant.design/

Doc

• [x] Doc site refactor
• [x] Dark Theme
• [x] Doc md sync

Feature

• [x] Select virtual scroll

Refactor

• [x] Form Component #4526 #4523
• [x] DatePicker Component #4621
• [x] Select Component
• [x] Modal Component #4702

Components

plz update the list after the PR sync MERGED

• [x] Affix: cipchk
• [x] Anchor: cipchk
• [x] BackTop: cipchk
• [x] List: cipchk
• [x] Upload: cipchk
• [x] Modal: hsuanxyz #4702
• [x] AutoComplete: hsuanxyz #4661
• [x] Avatar: hsuanxyz #4662
• [x] Badge: hsuanxyz #4663
• [x] Comment: hsuanxyz #4664
• [x] Drawer: hsuanxyz #4728
• [x] Mention: hsuanxyz #4755
• [x] Steps: hsuanxyz #4774
• [x] Tag: hsuanxyz #4793
• [x] TreeSelect: hsuanxyz
• [x] Typography: hsuanxyz
• [x] Breadcrumb: wendellhu95
• [x] Empty: wendellhu95
• [x] Carousel: wendellhu95
• [x] Cascader: wendellhu95
• [x] Descriptions: wendellhu95
• [x] Icon: wendellhu95
• [x] Message: wendellhu95
• [x] Notification: wendellhu95
• [x] Popconfirm: wendellhu95
• [x] Popover: wendellhu95
• [x] Progress: wendellhu95
• [x] Rate: wendellhu95
• [x] Result: wendellhu95
• [x] Slider: wendellhu95
• [x] Statistic: wendellhu95
• [x] Timeline: wendellhu95
• [x] Tooltip: wendellhu95
• [X] CodeEditor: wendellhu95
• [x] Calendar: wenqi73
• [x] DatePicker: wenqi73
• [x] Skeleton: wenqi73
• [x] TimePicker: wenqi73
• [x] Alert: vthinkxie
• [x] Button: vthinkxie
• [x] Card: vthinkxie
• [x] Checkbox: vthinkxie
• [x] Collapse: vthinkxie
• [x] Divider: vthinkxie
• [x] Dropdown: vthinkxie
• [x] Grid: vthinkxie
• [x] Input: vthinkxie
• [x] InputNumber: vthinkxie
• [x] Layout: vthinkxie
• [x] Menu: vthinkxie
• [x] Pagination: vthinkxie
• [x] Radio: vthinkxie
• [x] Select: vthinkxie
• [x] Spin: vthinkxie
• [x] Switch: vthinkxie
• [x] Table: vthinkxie
• [x] Tree: simplejason
• [x] Form: danranVm
• [x] PageHeader: CK110
• [x] Transfer: Ricbet

Style

• [x] Style sync
• [x] table border style #4439

Deprecated

• [x] deprecated check list
• [x] ng update
  
  
  
  • [x] tree #4602
  
  
  • [x] carousel #4469
  
  
  • [x] form #5032
  
  
• [x] clear unused test code

Angular 9.0

Document

• [x] ng-zorro-antd version and angular version relationship
• [x] OnPush immutable suggestion use immer in document
• [x] more Q & A

Bug Fix

• [x] css animation in ngOnInit or HostBinding
• [x] affix #3938
• [x] anchor #4553
• [x] message & notification breaks in angular 9, detection change issue perhaps @vthinkxie @wendellhu95

Feature

• [x] table filter & sort helper function
• [x] datepicker defaultPickerValue #4389, #2020
• [x] datepicker date-fns2.x #4346
• [x] canDeactivate #4407 #4432
• [x] input-number #3039
• [x] transfer [nzTargetKeys] #4360

• [x] add strictTemplate https://next.angular.io/guide/angular-compiler-options#stricttemplates

  Enhancement

• [x] unexpected transition: https://github.com/angular/angular/issues/34718 https://github.com/NG-ZORRO/ng-zorro-antd/pull/4648/commits/a094c44e4f62f4db8225bca01e048446fd1f5a34

• [x] component data flow direction
• [x] less input bindings
• [x] should not mutate input data
• [x] TemplateRef<void> -> TemplateRef<any>
• [x] menu collapse #4227 #2531 #1326
• [x] dropdown submenu positon #3412, width in modal #4169
• [x] cascader #4562

Refactor

• [x] remove file name nz prefix(nz-button.component.ts->button.component.ts)
• [x] split large components into smaller one and move template.html file into template: ``
• [x] move inline-style to patch.less
• [x] replace any with NzSafeAny
• [x] disposeOnNavigation

[vthinkxie]

简单整理了一下重构原则，如果有疑问欢迎一起讨论

1. template文件不再外置，与ts文件合并，文件名称去掉nz前缀，class名称保持不变。如果发现template文件过长，这意味这组件需要继续拆分
2. 组件内部 markForCheck 与 detectChanges 使用时机再斟酌一下，如果不是很了解的，可以再查看 https://danielwiehl.github.io/edu-angular-change-detection/
3. 与 next.ant.design DOM结构对齐
4. template binding 部分禁止使用 getter 方式，无论组件内部还是demo
5. 组件内部样式测量尽量避免 layout trashing https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=zh-cn ， 后面会将 fastdom https://github.com/wilsonpage/fastdom 集成作为服务 @hsuanxyz
6. 组件内部的数据流尽量避免反向数据流，尽量避免一切setTimeout 与 Promise resolve方式
7. 后续 tslint 将继续加强，禁止全文件 增加 // tslint:disable:
8. 非对用户提供的组件，增加 ɵ 前缀，例如
   https://github.com/NG-ZORRO/ng-zorro-antd/blob/aa22c0f91d6ba7b9bd0526de51c195f0bf61761c/components/core/transition-patch/public-api.ts#L9
9. 所有的 entryComponents 不再需要，全部删除
10. component extends 的 class 禁止被声明为一个 Component，如果 A Component extends B Component，应当将 A、B Component的共同逻辑抽离为 class 再分别 extends

cc @cipchk @CK110 @simplejason @hsuanxyz @Ricbet @danranVm @NearZXH @wendellhu95 @wenqi73

[adamlaz]

Can anyone provide an estimate for when Angular 9.x support will be stable? I see lots of progress recently 🎉

[vthinkxie]

Hi @adamlaz
we will try our best to release a v9 version before March

[krokofant]

Is Ng-Zorro 8.5.2 expected to work properly in Angular 9 _with Ivy disabled_?

[vthinkxie]

@krokofant angular annouce that ngcc keep the backward compatible, you could have a try

[vthinkxie]

Hi all, sorry for the delay, 90% components are ready, but we may still need one or two weeks to do the test and docs work

[dylanvdmerwe]

Thank you for the update. Keep up the good work. I know I look forward to the release whenever it is ready and stable.

[Y2zz]

取消模板文件移到ts 是基于什么样的考虑？

[vthinkxie]

取消模板文件移到ts 是基于什么样的考虑？

由template文件移动到ts文件的主要目的是为了强制组件开发者缩减模板文件长度，鼓励拆分组件

[xiaoxiangmoe]

@vthinkxie tslint 可以考虑迁移到 eslint，目前 angular-eslint 已经初步可用了。我们已经在我们的项目中试验了迁移到 eslint。

[wendellhu95]

@vthinkxie date-fns 有升级到 v2 到计划吗？

4833

[vthinkxie]

@vthinkxie tslint 可以考虑迁移到 eslint，目前 angular-eslint 已经初步可用了。我们已经在我们的项目中试验了迁移到 eslint。

eslint部分会在angular cli官方迁移之后进行，有兴趣可以到时候帮我们提一个pr

[xiaoxiangmoe]

template binding 部分禁止使用 getter 方式，无论组件内部还是demo

这个是基于什么的考虑呢？

[vthinkxie]

template binding 部分禁止使用 getter 方式，无论组件内部还是demo

这个是基于什么的考虑呢？

getter在非OnPush环境下使用时，非常容易出现副作用和复杂计算过程，从而影响组件性能，在demo中出现容易误导用户

[xiaoxiangmoe]

容易出现副作用和复杂计算过程是什么意思？（一般 getter 不会去赋值吧）。
如果需要类似 computed 的写法，除了 getter 还有什么等价写法吗？

[ponsakthianand]

Long waiting.... @vthinkxie

[timadevelop]

@ponsakthianand have some patience because people like @hsuanxyz are working hard for this release. They're not robots, they're human beings.

[ponsakthianand]

@timadevelop People don't get angry on me, I'm not blaming them... My words intended to express a curious and eager for waiting to get the latest version.. Cheers mate!

[RichardBosworth]

I'm seeing the detectChanges issue when using Jest to test a simple Angular component:

<nz-timeline>
  <nz-timeline-item *ngFor="let event of feedbackEvents">
    <strong>{{event.type | titlecase}}</strong> - {{event.date | date}}
    <br/>
    <small>{{event.summary}}</small>
  </nz-timeline-item>
</nz-timeline>

The same component works in production without throwing errors.

The error is as follows:
Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges

My test is as follows:

it('should show all the events', () => {
    const eventCount = 10;
    spectator.setInput('feedbackEvents', new FeedbackEventTestDataFactory().generateTestData(eventCount));
    spectator.detectChanges();
    expect(spectator.queryAll('nz-timeline-item').length).toEqual(eventCount);
  });

It's not a show-stopper as it works in production, but would be useful to be able to test the above.

[wendellhu95]

@RichardBosworth Could you please open an issue for that?

[RichardBosworth]

@wendellhu95

Yeah sure. Figured it might be related to:
message & notification breaks in angular 9, detection change issue perhaps

Will open a new issue.

[vthinkxie]

Hi all
ng-zorro-antd 9.0.0-beta.1 is released
the document is here
https://next.ng.ant.design

Note: this is still a beta version, not recommended to use in production env

[vthinkxie]

Hi @RichardBosworth
message and notification issue was fixed in 9.0.0-beta.1
it was caused by this issue