feat(module: all): support Angular 9 (#652)

.travis.yml

@@ -2,7 +2,7 @@ sudo: required
 dist: trusty
 language: node_js
 node_js:
-  - '10.16.3'
+  - '12.3.1'
 
 env:
   - TASK=pre-release

README-zh_CN.md

@@ -76,7 +76,7 @@ $ ng add ng-zorro-antd-mobile
 2. [<img alt="Segment Fault" src="https://gw.alipayobjects.com/zos/rmsportal/hfYFfCvHTQTUKntlJbMF.svg" width="100" />](https://segmentfault.com/t/ng-zorro-mobile)（中文）
 3. [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd-mobile.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd-mobile)（English & 中文）
 4. 加入钉钉 **NG-ZORRO-MOBILE** 自助服务群（中文）<br/>
-<img src="https://gw.alicdn.com/tfs/TB1_8dtJCzqK1RjSZPcXXbTepXa-1125-1485.jpg" width="300">
+<img src="https://img.alicdn.com/tfs/TB1cABKAkL0gK0jSZFAXXcA9pXa-1125-1485.jpg" width="300">
 
 ## 谁在使用
 

angular.json

@@ -16,6 +16,7 @@
             "main": "./site/src/main.ts",
             "tsConfig": "./site/src/tsconfig.app.json",
             "polyfills": "./site/src/polyfills.ts",
+            "aot": true,
             "assets": [
               "site/src/assets",
               "site/src/favicon.ico",
@@ -34,6 +35,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "./site/src/environments/environment.ts",
@@ -45,7 +52,6 @@
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": false,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -92,8 +98,13 @@
           "options": {
             "tsConfig": "components/tsconfig.lib.json",
             "project": "components/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "components/tsconfig.lib.prod.json"
+            }
           }
-        },
+},
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
@@ -111,10 +122,13 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "less"
+      "style": "less"
     },
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

components/accordion/accordion.component.spec.ts

@@ -117,7 +117,7 @@ export class TestAccordionComponent implements OnInit {
   accordion = true;
   activeKey = undefined;
 
-  @ViewChild(AccordionComponent, { static: false }) accordionComponent: AccordionComponent;
+  @ViewChild(AccordionComponent) accordionComponent: AccordionComponent;
 
   onChange(event) {
     console.log(event);

components/action-sheet/action-sheet.component.spec.ts

@@ -18,9 +18,7 @@ describe('ActionSheetComponent', () => {
       imports: [NgZorroAntdMobilePipesModule, ActionSheetModule, ButtonModule],
       providers: [ActionSheet, Overlay]
     }).compileComponents();
-    TestBed.overrideModule(ActionSheetModule, {
-      set: { entryComponents: [ActionSheetComponent, TestActionSheetBasicComponent] }
-    }).compileComponents();
+    TestBed.overrideModule(ActionSheetModule, {}).compileComponents();
   }));
 
   beforeEach(() => {
@@ -118,8 +116,7 @@ describe('ActionSheetComponent', () => {
       <div class="am-action-sheet-message">123</div>
     </ng-template>
   `,
-  providers: [ActionSheet],
-  entryComponents: [ActionSheetComponent]
+  providers: [ActionSheet]
 })
 export class TestActionSheetBasicComponent {
   dataList = [
@@ -144,7 +141,7 @@ export class TestActionSheetBasicComponent {
   }));
   locale = en_US;
 
-  @ViewChild('message', { static: false })
+  @ViewChild('message')
   message: ViewChild;
 
   constructor(private _actionSheet: ActionSheet) {}

components/action-sheet/action-sheet.module.ts

@@ -22,7 +22,6 @@ import { OverlayModule } from '@angular/cdk/overlay';
   ],
   declarations: [ActionSheetComponent],
   exports: [ActionSheetComponent],
-  entryComponents: [ActionSheetComponent],
   providers: [PopupService, ActionSheetService]
 })
 export class ActionSheetModule {}

components/calendar/calendar.component.html

@@ -36,9 +36,9 @@
     ></CalendarShortcutPanel>
     <CalendarConfirmPanel
       *ngIf="state.startDate"
+      [propsData]="props"
       [startDateTime]="state.startDate"
       [endDateTime]="state.endDate"
-      [propsData]="props"
       [disableBtn]="state.disConfirmBtn"
       [formatStr]="props.pickTime ? props.locale.dateTimeFormat : props.locale.dateFormat"
       [onConfirm]="triggerConfirm"

components/calendar/calendar.component.spec.ts

@@ -315,7 +315,7 @@ describe('CalendarComponent', () => {
     component.state.pickTime = true;
     component.state.defaultTimeValue = new Date(2000, 0, 1, 8);
     component.state.now = new Date(2018, 8, 2);
-    component.state.mimDate = new Date(2018, 8, 2);
+    component.state.minDate = new Date(2018, 8, 2);
     component.state.maxDate = new Date(2018, 8, 3);
     fixture.detectChanges();
     calendarEle.nativeElement
@@ -486,7 +486,7 @@ export class TestCalendarBasicComponent {
     }
   };
 
-  @ViewChild(CalendarComponent, { static: false })
+  @ViewChild(CalendarComponent)
   datepicker: CalendarComponent;
 
   constructor() {}

components/calendar/calendar.component.ts

@@ -71,7 +71,7 @@ export class CalendarComponent implements ControlValueAccessor, OnInit, OnDestro
   private _dateModelValue: any;
   private _dateModelTime: number = 0;
 
-  @ViewChild(CalendarDatePickerComponent, { static: false })
+  @ViewChild(CalendarDatePickerComponent)
   datepicker: CalendarDatePickerComponent;
 
   @Input()

components/carousel/carousel.component.spec.ts

@@ -144,7 +144,7 @@ export class TestCarouselComponent {
     ],
     imgHeight: '184px'
   };
-  @ViewChild(CarouselComponent, { static: false }) carouselComponent: CarouselComponent;
+  @ViewChild(CarouselComponent) carouselComponent: CarouselComponent;
   dataOutPut(event) {
     this.data = event;
   }

components/checkbox/checkbox.component.spec.ts

@@ -100,7 +100,7 @@ export class TestCheckboxComponent {
   checked: boolean = false;
   disabled: boolean = false;
 
-  @ViewChild(CheckboxComponent, { static: false })
+  @ViewChild(CheckboxComponent)
   checkbox: CheckboxComponent;
 
   onChange(e) {

components/core/testing/event-objects.ts

@@ -35,11 +35,10 @@ export function createMouseEvent(type: string, x = 0, y = 0): MouseEvent {
 export function createTouchEvent(type: string, pageX: number = 0, pageY: number = 0): UIEvent {
   // In favor of creating events that work for most of the browsers, the event is created
   // as a basic UI Event. The necessary details for the event will be set manually.
-  const event = document.createEvent('UIEvent');
+  const event = new UIEvent(type, { detail: 0, view: window });
   const touchDetails = { pageX, pageY };
   const changedTouchesDetails = { clientX: pageX, clientY: pageY };
-
-  event.initUIEvent(type, true, true, window, 0);
+  event.initEvent(type, true, true);
 
   // Most of the browsers don't have a "initTouchEvent" method that can be used to define
   // the touch details.
@@ -48,7 +47,7 @@ export function createTouchEvent(type: string, pageX: number = 0, pageY: number
     changedTouches: { value: [changedTouchesDetails] }
   });
 
-  return event as UIEvent;
+  return event;
 }
 
 /** Dispatches a keydown event from an element. */
@@ -70,7 +69,7 @@ export function createKeyboardEvent(type: string, keyCode: number, target?: Elem
 
   // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.
   event.preventDefault = function() {
-    Object.defineProperty(event, 'defaultPrevented', { get: () => true });
+    Object.defineProperty(event, 'defaultPrevented', { get: () => true, configurable: true });
     return originalPreventDefault.apply(this, arguments);
   };
 

components/date-picker/date-picker-options.provider.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
 import { zh_CN } from '../locale-provider/locale';
 export interface DatePickerOptionsInterface {
   mode: string;
@@ -18,6 +18,7 @@ export interface DatePickerOptionsInterface {
   showErrorToastInterval: number;
 }
 
+@Injectable()
 export class DatePickerOptions implements DatePickerOptionsInterface {
   mode = 'date';
   value = new Date();

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

@@ -9,7 +9,6 @@ import {
   ListModule,
   ToastModule,
   ButtonModule,
-  ToastComponent,
   LocaleProviderModule,
   LocaleProviderService
 } from '../..';
@@ -28,9 +27,7 @@ describe('DatePickerComponent', () => {
       providers: [DatePickerOptions, LocaleProviderService, Toast],
       imports: [DatePickerModule, LocaleProviderModule, ButtonModule, ListModule, ToastModule, FormsModule]
     }).compileComponents();
-    TestBed.overrideModule(DatePickerModule, {
-      set: { entryComponents: [DatePickerComponent] }
-    }).compileComponents();
+    TestBed.overrideModule(DatePickerModule, {}).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -64,7 +64,7 @@ export class DatePickerComponent implements OnInit, OnDestroy, AfterViewInit {
   ngModelOnChange: (value: Date) => {};
   ngModelOnTouched: () => {};
 
-  @ViewChild('picker', { static: true, read: ViewContainerRef })
+  @ViewChild('picker', { read: ViewContainerRef })
   picker: ViewContainerRef;
 
   @HostListener('mousedown', ['$event'])

components/date-picker/date-picker.directive.ts

@@ -30,6 +30,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 })
 export class DatePickerDirective implements OnDestroy, OnChanges, OnInit, ControlValueAccessor {
   picker: ComponentRef<DatePickerComponent>;
+  appendToBodyElement: HTMLElement;
   private _eventListeners: Array<() => void> = [];
   private _ngModelOnChange: (value: Date) => {};
   private _ngModelOnTouched: () => {};
@@ -148,13 +149,17 @@ export class DatePickerDirective implements OnDestroy, OnChanges, OnInit, Contro
         childInjector
       );
       if (options.appendToBody) {
-        document.body.appendChild(this.picker.location.nativeElement);
+        this.appendToBodyElement = document.body.appendChild(this.picker.location.nativeElement);
       }
       this.onVisibleChange.emit(true);
     }
   }
 
   hidePicker(): void {
+    if (this.appendToBodyElement) {
+      document.body.removeChild(this.appendToBodyElement);
+      this.appendToBodyElement = null;
+    }
     if (this.picker) {
       this.picker.destroy();
       delete this.picker;

components/date-picker/date-picker.module.ts

@@ -12,7 +12,6 @@ import { ToastComponent } from '../toast/toast.component';
   imports: [CommonModule, LocaleProviderModule, ToastModule, FormsModule],
   exports: [DatePickerComponent, DatePickerDirective],
   declarations: [DatePickerComponent, DatePickerDirective],
-  entryComponents: [DatePickerComponent],
   providers: [DatePickerOptions, LocaleProviderModule]
 })
 export class DatePickerModule {}

components/drawer/drawer.component.spec.ts

@@ -399,7 +399,7 @@ export class TestDrawerComponent {
   dragHandleStyle = { color: '#A6A6A9' };
   touch = true;
 
-  @ViewChild(DrawerComponent, { static: false })
+  @ViewChild(DrawerComponent)
   drawer: DrawerComponent;
 
   onOpenChange(value) {

components/image-picker/image-picker.component.spec.ts

@@ -149,7 +149,7 @@ export class TestImagePickerComponent {
   multiple = true;
   selectable = true;
   len = 3;
-  @ViewChild(ImagePickerComponent, { static: false }) imagePicker: ImagePickerComponent;
+  @ViewChild(ImagePickerComponent) imagePicker: ImagePickerComponent;
   imageChangeCallback = jasmine.createSpy('imageChangeCallback is callback');
   imageClickCallback = jasmine.createSpy('imageClickCallback is callback');
 

components/image-picker/image-picker.component.ts

@@ -20,7 +20,7 @@ export class ImagePickerComponent {
   private _files: Array<any> = [];
   private _multiple: boolean = false;
 
-  @ViewChild('fileSelectorInput', { read: ViewContainerRef, static: false })
+  @ViewChild('fileSelectorInput', { read: ViewContainerRef })
   private _fileSelectorInput: ViewContainerRef;
 
   @Input() capture: boolean | string = false;

components/input-item/input-item.component.spec.ts

@@ -455,10 +455,10 @@ export class TestInputComponent {
   focus;
   content = 'content';
 
-  @ViewChild(InputItemComponent, { static: false })
+  @ViewChild(InputItemComponent)
   inputItemComp: InputItemComponent;
 
-  @ViewChild('extraTemplate', { static: false })
+  @ViewChild('extraTemplate')
   extraTpl: TemplateRef<any>;
 
   errorClick = jasmine.createSpy('errorClick callback');

components/input-item/input-item.component.ts

@@ -64,7 +64,7 @@ export class InputItemComponent implements OnInit, AfterViewInit, ControlValueAc
 
   @ViewChild('lableContent', { static: true })
   lableRef: ElementRef;
-  @ViewChild('inputElement', { static: false })
+  @ViewChild('inputElement')
   inputElementRef: ElementRef;
 
   @Input()

components/input-item/input-item.module.ts

@@ -8,7 +8,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 @NgModule({
   exports: [InputItemComponent, CustomKeyboardComponent, CustomInputComponent],
   declarations: [InputItemComponent, CustomKeyboardComponent, CustomInputComponent],
-  entryComponents: [CustomKeyboardComponent],
   imports: [CommonModule, FormsModule, ReactiveFormsModule]
 })
 export class InputItemModule {}

components/locale-provider/locale-provider.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Injectable } from '@angular/core';
 import zh_CN from './locale/zh_CN';
 import { LocaleProviderPipe } from './locale-provider.pipe';
 import { LOCAL_PROVIDER_TOKEN } from './locale-provider.token';

components/menu/menu.component.spec.ts

@@ -336,7 +336,7 @@ export class TestMenuComponent {
   height = document.documentElement.clientHeight / 2;
   multiSelect = false;
 
-  @ViewChild(MenuComponent, { static: false })
+  @ViewChild(MenuComponent)
   menu: MenuComponent;
 
   constructor() {}

components/modal/modal.component.spec.ts

@@ -28,9 +28,7 @@ describe('ModalComponent', () => {
       ],
       providers: [Overlay, ModalOptions, AlertOptions]
     }).compileComponents();
-    TestBed.overrideModule(ModalModule, {
-      set: { entryComponents: [ModalServiceComponent] }
-    }).compileComponents();
+    TestBed.overrideModule(ModalModule, {}).compileComponents();
   }));
 
   beforeEach(() => {
@@ -301,8 +299,8 @@ export class TestModalBasicComponent {
       }
     }
   ];
-  @ViewChild('title', { static: false }) titleRef: ViewChild;
-  @ViewChild(ModalComponent, { static: false }) modalServiceComponent: ModalComponent;
+  @ViewChild('title') titleRef: ViewChild;
+  @ViewChild(ModalComponent) modalServiceComponent: ModalComponent;
   templateOpenSpy = jasmine.createSpy('template afterOpen spy');
   templateCloseSpy = jasmine.createSpy('template afterClose spy');
   constructor(private _modal: ModalService) {

components/modal/modal.module.ts

@@ -25,7 +25,6 @@ import { PopupService } from '../core/services/popup.service';
   ],
   exports: [ModalComponent, ModalServiceComponent],
   declarations: [ModalComponent, ModalServiceComponent],
-  entryComponents: [ModalServiceComponent],
   providers: [AlertOptions, ModalService, PopupService]
 })
 export class ModalModule {}