chore: bump angular v14 to angular v15 (#7752)

* chore: update node engine to authorize node 18

feat(module:components): ✨ migrate components to angular v15

build(packaging): ⬆️ upgrade schematics/angular to v15

build(packaging): ⬆️ upgrade dependencies angular eslint to v15

build(packaging): ⬆️ upgrade dependencies angular cdk to v15

chore: bump node versio to minor version supported by angular: 14.20.1

refactor(module:components): ♻️ remove useless code

chore(packaging): upgrade angular version to v15

chore(packaging): update angular version to v15

fix: 💚 install --legacy-peer-deps not known command

chore(packaging): migrate angular to v15

fix: 🐛 build ci stage

* chore: bump angular v14 to angular v15

* chore: bump nguniversal/builders v14 to v15

* chore: bump nguniversal/express v14 to v15

* refactor(module:autocomplete): ♻️ remove unused code

* refactor(module:dropdown): ♻️ remove unused code

* refactor(module:menu): ♻️ remove useless code

* refactor(module:tree): avoid using legacy setDisableState behavior

* refactor(module:tree): ♻️ remove useless log

* refactor(packaging): update authorize node engine

.npmrc

@@ -1 +1,2 @@
-node-options=--max-old-space-size=14000
+node-options=--max-old-space-size=14000
+legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-14.16.1
+16.14.0

.prettierignore

@@ -6,3 +6,4 @@ publish/
 schematics/
 package.json
 **/template/*
+dist

angular.json

@@ -275,6 +275,12 @@
     },
     "@schematics/angular:directive": {
       "prefix": "app"
+    },
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
     }
   },
   "cli": {

components/auto-complete/autocomplete.module.ts

@@ -7,7 +7,6 @@ import { BidiModule } from '@angular/cdk/bidi';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 
 import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
@@ -31,6 +30,6 @@ import { NzAutocompleteComponent } from './autocomplete.component';
     NzAutocompleteTriggerDirective,
     NzAutocompleteOptgroupComponent
   ],
-  imports: [BidiModule, CommonModule, OverlayModule, FormsModule, NzOutletModule, NzNoAnimationModule, NzInputModule]
+  imports: [BidiModule, CommonModule, OverlayModule, NzOutletModule, NzNoAnimationModule, NzInputModule]
 })
 export class NzAutocompleteModule {}

components/cascader/cascader.component.ts

@@ -328,6 +328,7 @@ export class NzCascaderComponent
   private isOpening = false;
   private delayMenuTimer: number | null = null;
   private delaySelectTimer: number | null = null;
+  private isNzDisableFirstChange: boolean = true;
 
   get inSearchingMode(): boolean {
     return this.cascaderService.inSearchingMode;
@@ -749,7 +750,8 @@ export class NzCascaderComponent
     if (isDisabled) {
       this.closeMenu();
     }
-    this.nzDisabled = isDisabled;
+    this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
+    this.isNzDisableFirstChange = false;
   }
 
   closeMenu(): void {

components/cascader/cascader.spec.ts

@@ -21,7 +21,7 @@ import {
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { UntypedFormBuilder, UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 

components/date-picker/date-picker.component.ts

@@ -278,7 +278,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
   private isCustomPlaceHolder: boolean = false;
   private isCustomFormat: boolean = false;
   private showTime: SupportTimeOptions | boolean = false;
-
+  private isNzDisableFirstChange: boolean = true;
   // --- Common API
   @Input() @InputBoolean() nzAllowClear: boolean = true;
   @Input() @InputBoolean() nzAutoFocus: boolean = false;
@@ -766,8 +766,9 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.nzDisabled = isDisabled;
+    this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
     this.cdr.markForCheck();
+    this.isNzDisableFirstChange = true;
   }
 
   // ------------------------------------------------------------------------

components/drawer/drawer.component.ts

@@ -137,7 +137,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
+export class NzDrawerComponent<T extends {} = NzSafeAny, R = NzSafeAny, D extends Partial<T> = NzSafeAny>
   extends NzDrawerRef<T, R>
   implements OnInit, OnDestroy, AfterViewInit, OnChanges, NzDrawerOptionsOfComponent
 {

components/drawer/drawer.service.ts

@@ -16,7 +16,7 @@ import { NzDrawerRef } from './drawer-ref';
 import { NzDrawerComponent } from './drawer.component';
 import { NzDrawerServiceModule } from './drawer.service.module';
 
-export class DrawerBuilderForService<T, R> {
+export class DrawerBuilderForService<T extends {}, R> {
   private drawerRef: NzDrawerComponent<T, R> | null;
   private overlayRef: OverlayRef;
   private unsubscribe$ = new Subject<void>();
@@ -65,7 +65,7 @@ export class DrawerBuilderForService<T, R> {
 export class NzDrawerService {
   constructor(private overlay: Overlay) {}
 
-  create<T = NzSafeAny, D = undefined, R = NzSafeAny>(
+  create<T extends {} = NzSafeAny, D = undefined, R = NzSafeAny>(
     options: NzDrawerOptions<T, D extends undefined ? {} : D>
   ): NzDrawerRef<T, R> {
     return new DrawerBuilderForService<T, R>(this.overlay, options).getInstance();

components/dropdown/dropdown.module.ts

@@ -8,7 +8,6 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
@@ -28,7 +27,6 @@ import { NzDropDownDirective } from './dropdown.directive';
     BidiModule,
     CommonModule,
     OverlayModule,
-    FormsModule,
     NzButtonModule,
     NzMenuModule,
     NzIconModule,

components/menu/menu-item.directive.ts

@@ -18,7 +18,7 @@ import {
   QueryList,
   SimpleChanges
 } from '@angular/core';
-import { NavigationEnd, Router, RouterLink, RouterLinkWithHref } from '@angular/router';
+import { NavigationEnd, Router, RouterLink } from '@angular/router';
 import { combineLatest, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
@@ -65,7 +65,6 @@ export class NzMenuItemDirective implements OnInit, OnChanges, OnDestroy, AfterC
   @Input() @InputBoolean() nzMatchRouterExact = false;
   @Input() @InputBoolean() nzMatchRouter = false;
   @ContentChildren(RouterLink, { descendants: true }) listOfRouterLink!: QueryList<RouterLink>;
-  @ContentChildren(RouterLinkWithHref, { descendants: true }) listOfRouterLinkWithHref!: QueryList<RouterLinkWithHref>;
 
   /** clear all item selected status except this */
   clickMenuItem(e: MouseEvent): void {
@@ -90,13 +89,7 @@ export class NzMenuItemDirective implements OnInit, OnChanges, OnDestroy, AfterC
   }
 
   private updateRouterActive(): void {
-    if (
-      !this.listOfRouterLink ||
-      !this.listOfRouterLinkWithHref ||
-      !this.router ||
-      !this.router.navigated ||
-      !this.nzMatchRouter
-    ) {
+    if (!this.listOfRouterLink || !this.router || !this.router.navigated || !this.nzMatchRouter) {
       return;
     }
     Promise.resolve().then(() => {
@@ -111,16 +104,11 @@ export class NzMenuItemDirective implements OnInit, OnChanges, OnDestroy, AfterC
 
   private hasActiveLinks(): boolean {
     const isActiveCheckFn = this.isLinkActive(this.router!);
-    return (
-      (this.routerLink && isActiveCheckFn(this.routerLink)) ||
-      (this.routerLinkWithHref && isActiveCheckFn(this.routerLinkWithHref)) ||
-      this.listOfRouterLink.some(isActiveCheckFn) ||
-      this.listOfRouterLinkWithHref.some(isActiveCheckFn)
-    );
+    return (this.routerLink && isActiveCheckFn(this.routerLink)) || this.listOfRouterLink.some(isActiveCheckFn);
   }
 
-  private isLinkActive(router: Router): (link: RouterLink | RouterLinkWithHref) => boolean {
-    return (link: RouterLink | RouterLinkWithHref) =>
+  private isLinkActive(router: Router): (link: RouterLink) => boolean {
+    return (link: RouterLink) =>
       router.isActive(link.urlTree || '', {
         paths: this.nzMatchRouterExact ? 'exact' : 'subset',
         queryParams: this.nzMatchRouterExact ? 'exact' : 'subset',
@@ -136,7 +124,6 @@ export class NzMenuItemDirective implements OnInit, OnChanges, OnDestroy, AfterC
     @Inject(NzIsMenuInsideDropDownToken) public isMenuInsideDropDown: boolean,
     @Optional() private directionality: Directionality,
     @Optional() private routerLink?: RouterLink,
-    @Optional() private routerLinkWithHref?: RouterLinkWithHref,
     @Optional() private router?: Router
   ) {
     if (router) {
@@ -165,7 +152,6 @@ export class NzMenuItemDirective implements OnInit, OnChanges, OnDestroy, AfterC
 
   ngAfterContentInit(): void {
     this.listOfRouterLink.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.updateRouterActive());
-    this.listOfRouterLinkWithHref.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.updateRouterActive());
     this.updateRouterActive();
   }
 

components/modal/modal-ref.ts

@@ -184,7 +184,7 @@ export class NzModalRef<T = NzSafeAny, R = NzSafeAny> implements NzModalLegacyAP
         this.config[loadingKey] = true;
         let doClose: boolean | void | {} = false;
         try {
-          doClose = await result;
+          doClose = (await result) as typeof result;
         } finally {
           this.config[loadingKey] = false;
           this.closeWhitResult(doClose);

components/modal/modal.component.ts

@@ -40,7 +40,9 @@ import { getConfigFromComponent } from './utils';
   template: ``,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges, NzModalLegacyAPI<T, R>, OnDestroy {
+export class NzModalComponent<T extends ModalOptions = NzSafeAny, R = NzSafeAny>
+  implements OnChanges, NzModalLegacyAPI<T, R>, OnDestroy
+{
   static ngAcceptInputType_nzMask: BooleanInput;
   static ngAcceptInputType_nzMaskClosable: BooleanInput;
   static ngAcceptInputType_nzCloseOnNavigation: BooleanInput;

components/modal/utils.ts

@@ -28,7 +28,7 @@ export function getValueWithConfig<T>(
  * @breaking-change 14.0.0
  */
 export function setContentInstanceParams<T>(instance: T, params: Partial<T> | undefined): void {
-  Object.assign(instance, params);
+  Object.assign(<{}>instance, params);
 }
 
 export function getConfigFromComponent<T extends ModalOptions>(component: T): ModalOptions {

components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-zorro-antd",
-  "version": "14.3.0",
+  "version": "15.0.0",
   "license": "MIT",
   "description": "An enterprise-class UI components based on Ant Design and Angular",
   "schematics": "./schematics/collection.json",
@@ -27,16 +27,16 @@
     "url": "https://github.com/NG-ZORRO/ng-zorro-antd/issues"
   },
   "dependencies": {
-    "@angular/cdk": "^14.1.0",
+    "@angular/cdk": "^15.0.0",
     "@ant-design/icons-angular": "^14.1.0",
     "date-fns": "^2.16.1"
   },
   "peerDependencies": {
-    "@angular/animations": "^14.1.0",
-    "@angular/common": "^14.1.0",
-    "@angular/forms": "^14.1.0",
-    "@angular/core": "^14.1.0",
-    "@angular/platform-browser": "^14.1.0",
-    "@angular/router": "^14.1.0"
+    "@angular/animations": "^15.0.1",
+    "@angular/common": "^15.0.1",
+    "@angular/forms": "^15.0.1",
+    "@angular/core": "^15.0.1",
+    "@angular/platform-browser": "^15.0.1",
+    "@angular/router": "^15.0.1"
   }
-}
+}

components/tabs/tab-link.directive.ts

@@ -4,7 +4,7 @@
  */
 
 import { Directive, ElementRef, Host, Optional, Self, TemplateRef } from '@angular/core';
-import { RouterLink, RouterLinkWithHref } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { TabTemplateContext } from './interfaces';
 
@@ -27,9 +27,5 @@ export class NzTabLinkTemplateDirective {
   exportAs: 'nzTabLink'
 })
 export class NzTabLinkDirective {
-  constructor(
-    public elementRef: ElementRef<HTMLAnchorElement>,
-    @Optional() @Self() public routerLink?: RouterLink,
-    @Optional() @Self() public routerLinkWithHref?: RouterLinkWithHref
-  ) {}
+  constructor(public elementRef: ElementRef<HTMLAnchorElement>, @Optional() @Self() public routerLink?: RouterLink) {}
 }

components/tabs/tabset.component.ts

@@ -26,7 +26,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { NavigationEnd, Router, RouterLink, RouterLinkWithHref } from '@angular/router';
+import { NavigationEnd, Router, RouterLink } from '@angular/router';
 import { merge, Observable, of, Subject, Subscription } from 'rxjs';
 import { delay, filter, first, startWith, takeUntil } from 'rxjs/operators';
 
@@ -473,12 +473,12 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
 
     return tabs.findIndex(tab => {
       const c = tab.linkDirective;
-      return c ? isActive(c.routerLink) || isActive(c.routerLinkWithHref) : false;
+      return c ? isActive(c.routerLink) : false;
     });
   }
 
-  private isLinkActive(router: Router): (link?: RouterLink | RouterLinkWithHref) => boolean {
-    return (link?: RouterLink | RouterLinkWithHref) =>
+  private isLinkActive(router: Router): (link?: RouterLink | RouterLink) => boolean {
+    return (link?: RouterLink | RouterLink) =>
       link
         ? router.isActive(link.urlTree || '', {
             paths: this.nzLinkExact ? 'exact' : 'subset',

components/test.ts

@@ -13,25 +13,11 @@ declare const __karma__: any;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const require: any;
 
-const tags = __karma__.config.args[0];
+
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
   teardown: { destroyAfterEach: false }
 });
 jasmine.getEnv().allowRespy(true);
 
-let filterRegExp: RegExp;
-
-// skip webstorm arg
-if (tags && tags.indexOf('--') === -1) {
-  filterRegExp = new RegExp(`(${tags})\\.spec\\.ts$`);
-} else {
-  filterRegExp = /\.spec\.ts$/;
-}
 
-// Then we find all the tests.
-const context = require.context('../components/', true, /\.spec\.ts$/);
-// Filter specify file
-const specFiles = context.keys().filter((path: string) => filterRegExp.test(path));
-// And load the modules.
-specFiles.map(context);

components/tree-select/tree-select.component.ts

@@ -340,6 +340,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   positions: ConnectionPositionPair[] = [];
 
   private destroy$ = new Subject<void>();
+  private isNzDisableFirstChange: boolean = true;
 
   onChange: OnChangeType = _value => {};
   onTouched: OnTouchedType = () => {};
@@ -422,8 +423,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.nzDisabled = isDisabled;
+    this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
     this.closeDropDown();
+    this.isNzDisableFirstChange = false;
   }
 
   private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void {

components/tree-select/tree-select.spec.ts

@@ -4,7 +4,7 @@ import { TestKey } from '@angular/cdk/testing';
 import { UnitTestElement } from '@angular/cdk/testing/testbed';
 import { Component, DebugElement, NgZone, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { UntypedFormBuilder, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -603,8 +603,8 @@ describe('tree-select component', () => {
       treeSelect = fixture.debugElement.query(By.directive(NzTreeSelectComponent));
     });
     it('should display', fakeAsync(() => {
-      treeSelect.nativeElement.click();
       fixture.detectChanges();
+      treeSelect.nativeElement.click();
       flush();
       fixture.detectChanges();
       expect(overlayContainerElement.querySelector('span.anticon.anticon-frown-o')).toBeTruthy();

components/tsconfig.lib.json

@@ -10,8 +10,7 @@
     "lib": ["es2020", "dom"],
     "sourceMap": true,
     "strictFunctionTypes": true,
-    "stripInternal": true,
-    "target": "es2020"
+    "stripInternal": true
   },
   "angularCompilerOptions": {
     "strictInputAccessModifiers": true,