Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ant design 4.0 & Angular 9.0 sync #4634

Closed
vthinkxie opened this issue Jan 6, 2020 · 23 comments
Closed

Ant design 4.0 & Angular 9.0 sync #4634

vthinkxie opened this issue Jan 6, 2020 · 23 comments
Assignees
@vthinkxie @cipchk @chensimeng @CK110 @simplejason @wzhudev @NearZXH @Ricbet @hsuanxyz @wenqi73
Milestone
9.0.0

Comments

@vthinkxie
Copy link
Member

vthinkxie commented Jan 6, 2020 •
edited by hsuanxyz
Loading

Ant design 4.0 & Angular 9.0 sync

Current in Beta

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

Doc

  • Doc site refactor
  • Dark Theme
  • Doc md sync

Feature

  • Select virtual scroll

Refactor

Components

plz update the list after the PR sync MERGED

Style

Deprecated

Angular 9.0

Document

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

Bug Fix

Feature

Enhancement

Refactor

  • remove file name nz prefix(nz-button.component.ts->button.component.ts)
  • split large components into smaller one and move template.html file into template: ``
  • move inline-style to patch.less
  • replace any with NzSafeAny
  • disposeOnNavigation
@wzhudev wzhudev added this to the 9.0.0 milestone Jan 6, 2020
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Jan 10, 2020
@hsuanxyz
refactor(module:autocomplete): refactor and aync Ant Design 4
48a9e43 
ref NG-ZORRO#4634
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Jan 10, 2020
@hsuanxyz
refactor(module:autocomplete): refactor and sync Ant Design 4
873b01e 
ref NG-ZORRO#4634
@hsuanxyz hsuanxyz mentioned this issue Jan 10, 2020
Merged
3 tasks
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Jan 10, 2020
@hsuanxyz
refactor(module:avatar): refactor and aync Ant Design 4
bf86389 
ref NG-ZORRO#4634
@hsuanxyz hsuanxyz mentioned this issue Jan 10, 2020
Merged
3 tasks
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Jan 10, 2020
@hsuanxyz
refactor(module:badge): refactor and aync Ant Design 4
4155602 
ref NG-ZORRO#4634
@hsuanxyz hsuanxyz mentioned this issue Jan 10, 2020
Merged
3 tasks
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Jan 10, 2020
@hsuanxyz
refactor(module:comment): refactor and aync Ant Design 4
afcb9e3 
ref NG-ZORRO#4634
@hsuanxyz hsuanxyz mentioned this issue Jan 10, 2020
Merged
3 tasks
@wzhudev wzhudev pinned this issue Jan 10, 2020
@vthinkxie
Copy link
Member Author

vthinkxie commented Jan 14, 2020 •
edited
Loading

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

  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. 非对用户提供的组件，增加 ɵ 前缀，例如

    ng-zorro-antd/components/core/transition-patch/public-api.ts

    Line 9 in aa22c0f

    export { NzTransitionPatchModule as ɵNzTransitionPatchModule } from './transition-patch.module';
  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

@vthinkxie vthinkxie mentioned this issue Jan 21, 2020
Closed
62 tasks
@danranVm danranVm mentioned this issue Jan 21, 2020
Merged
3 tasks
@CK110 CK110 mentioned this issue Jan 22, 2020
Merged
3 tasks
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Jan 25, 2020
@hsuanxyz
refactor(module:drawer): refactor
884232a 
ref NG-ZORRO#4634
@hsuanxyz hsuanxyz mentioned this issue Jan 25, 2020
Merged
3 tasks
@vthinkxie vthinkxie mentioned this issue Jan 30, 2020
Closed
@adamlaz
Copy link

adamlaz commented Feb 13, 2020

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

@vthinkxie
Copy link
Member Author

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

@wzhudev wzhudev reopened this Mar 3, 2020
@vthinkxie
Copy link
Member Author

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

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

@xiaoxiangmoe
Copy link
Contributor

xiaoxiangmoe commented Mar 4, 2020 •
edited
Loading

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

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

@vthinkxie
Copy link
Member Author

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

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

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

@xiaoxiangmoe
Copy link
Contributor

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

@ponsakthianand

This comment has been minimized.

Sign in to view
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Mar 5, 2020
@hsuanxyz
refactor(module:autocomplete): refactor and sync Ant Design 4
e1a9952 
ref NG-ZORRO#4634
@timadevelop
Copy link

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

hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Mar 6, 2020
@hsuanxyz
refactor(module:autocomplete): refactor and sync Ant Design 4
74657d1 
ref NG-ZORRO#4634
@ponsakthianand
Copy link

@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!

hsuanxyz added a commit that referenced this issue Mar 6, 2020
@hsuanxyz
refactor(module:autocomplete): refactor and sync Ant Design 4 (#4661)
5bec1ff 
ref #4634
@RichardBosworth
Copy link

RichardBosworth commented Mar 11, 2020 •
edited
Loading

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.

@wzhudev
Copy link
Member

wzhudev commented Mar 11, 2020

@RichardBosworth Could you please open an issue for that?

@RichardBosworth
Copy link

RichardBosworth commented Mar 11, 2020 •
edited
Loading

@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
Copy link
Member Author

vthinkxie commented Mar 16, 2020 •
edited
Loading

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
Copy link
Member Author

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

@vthinkxie vthinkxie mentioned this issue Mar 30, 2020
Closed
21 tasks
@Ricbet Ricbet mentioned this issue Apr 5, 2020
Merged
3 tasks
Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this issue Apr 9, 2020
@hsuanxyz @Ricbet
refactor(module:badge): refactor and aync Ant Design 4 (NG-ZORRO#4663)
d5d7bc2 
* refactor(module:badge): refactor and aync Ant Design 4

* fix(module:badge): fix the number style

ref NG-ZORRO#4634
Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this issue Apr 9, 2020
@hsuanxyz @Ricbet
refactor(module:drawer): refactor (NG-ZORRO#4728)
b2f23b4 
ref NG-ZORRO#4634
Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this issue Apr 9, 2020
@hsuanxyz @Ricbet
refactor(module:comment): refactor and aync Ant Design 4 (NG-ZORRO#4664)
712408f 
ref NG-ZORRO#4634
Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this issue Apr 9, 2020
@hsuanxyz @Ricbet
refactor(module:avatar): refactor and aync Ant Design 4 (NG-ZORRO#4662)
1c8509a 
ref NG-ZORRO#4634
Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this issue Apr 9, 2020
@hsuanxyz @Ricbet
refactor(module:autocomplete): refactor and sync Ant Design 4 (NG-ZOR…
ee10d75 
…RO#4661)

ref NG-ZORRO#4634
@vthinkxie vthinkxie unpinned this issue Apr 15, 2020
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
@hsuanxyz
refactor(module:badge): refactor and aync Ant Design 4 (NG-ZORRO#4663)
72f90df 
* refactor(module:badge): refactor and aync Ant Design 4

* fix(module:badge): fix the number style

ref NG-ZORRO#4634
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
@hsuanxyz
refactor(module:drawer): refactor (NG-ZORRO#4728)
bc5dbb5 
ref NG-ZORRO#4634
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
@hsuanxyz
refactor(module:comment): refactor and aync Ant Design 4 (NG-ZORRO#4664)
802f244 
ref NG-ZORRO#4634
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
@hsuanxyz
refactor(module:avatar): refactor and aync Ant Design 4 (NG-ZORRO#4662)
851512d 
ref NG-ZORRO#4634
hsuanxyz added a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
@hsuanxyz
refactor(module:autocomplete): refactor and sync Ant Design 4 (NG-ZOR…
7dd0a9f 
…RO#4661)

ref NG-ZORRO#4634
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@vthinkxie vthinkxie

@cipchk cipchk

@chensimeng chensimeng

@CK110 CK110

@simplejason simplejason

@wzhudev wzhudev

@NearZXH NearZXH

@Ricbet Ricbet

@hsuanxyz hsuanxyz

@wenqi73 wenqi73

Labels
None yet
Projects
None yet
Milestone
9.0.0
Development

No branches or pull requests