fix(module:*): fix template types check (#4994)

azure-pipelines.yml

@@ -33,6 +33,16 @@ stages:
             npx surge --project ./dist --domain $DEPLOY_DOMAIN
   dependsOn: env
 
+- stage: ivy_prebuild
+  jobs:
+    - job: ivy_prebuild
+      steps:
+        - task: Npm@1
+          inputs:
+            command: 'install'
+        - script: |
+            gulp library:ivy-prebuild
+
 - stage: test
   jobs:
     - job: test_components

components/affix/affix.spec.ts

@@ -55,7 +55,7 @@ describe('affix', () => {
     fixture = TestBed.createComponent(TestAffixComponent);
     context = fixture.componentInstance;
     component = context.nzAffixComponent;
-    scrollService = TestBed.get(NzScrollService);
+    scrollService = TestBed.inject(NzScrollService);
     componentObject = new NzAffixPageObject();
     debugElement = fixture.debugElement;
     componentObject.wrap().id = 'wrap';

components/auto-complete/autocomplete.component.ts

@@ -41,7 +41,7 @@ export interface AutocompleteDataSourceItem {
   label: string;
 }
 
-export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | number[];
+export type AutocompleteDataSource = Array<AutocompleteDataSourceItem | string | number>;
 
 @Component({
   selector: 'nz-autocomplete',
@@ -72,11 +72,11 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
       </ng-template>
       <ng-template #optionsTemplate>
         <nz-auto-option
-          *ngFor="let option of nzDataSource"
+          *ngFor="let option of nzDataSource!"
           [nzValue]="option"
-          [nzLabel]="option && option.label ? option.label : $any(option)"
+          [nzLabel]="option && $any(option).label ? $any(option).label : $any(option)"
         >
-          {{ option && option.label ? option.label : option }}
+          {{ option && $any(option).label ? $any(option).label : $any(option) }}
         </nz-auto-option>
       </ng-template>
     </ng-template>

components/avatar/avatar.component.ts

@@ -49,7 +49,8 @@ const NZ_CONFIG_COMPONENT_NAME = 'avatar';
     '[style.width]': 'customSize',
     '[style.height]': 'customSize',
     '[style.line-height]': 'customSize',
-    '[style.font-size]': '(hasIcon && customSize) ? (nzSize / 2 + "px") : null'
+    // nzSize type is number when customSize is true
+    '[style.font-size.px]': '(hasIcon && customSize) ? $any(nzSize) / 2 : null'
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,

components/back-top/back-top.spec.ts

@@ -46,7 +46,8 @@ describe('Component:nz-back-top', () => {
     component = fixture.componentInstance.nzBackTopComponent;
     componentObject = new NzBackTopPageObject();
     debugElement = fixture.debugElement;
-    scrollService = TestBed.get(NzScrollService);
+    // tslint:disable-next-line:no-any
+    scrollService = TestBed.inject(NzScrollService) as any;
   });
 
   describe('[default]', () => {

components/badge/badge.component.ts

@@ -26,7 +26,7 @@ import {
 } from '@angular/core';
 import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { BooleanInput } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean, isEmpty } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
 import { startWith, take, takeUntil } from 'rxjs/operators';
@@ -106,12 +106,12 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
   @Input() @InputBoolean() nzShowDot = true;
   @Input() @InputBoolean() nzDot = false;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzOverflowCount: number = 99;
-  @Input() nzText?: string;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzColor?: string = undefined;
-  @Input() nzTitle?: string;
-  @Input() nzStyle?: { [key: string]: string };
+  @Input() nzStyle: { [key: string]: string } | null = null;
+  @Input() nzText?: string;
+  @Input() nzTitle?: string | null | undefined;
   @Input() nzStatus?: NzBadgeStatusType;
-  @Input() nzCount?: number | TemplateRef<void>;
+  @Input() nzCount?: number | TemplateRef<NzSafeAny>;
   @Input() nzOffset?: [number, number];
 
   checkContent(): void {

components/breadcrumb/breadcrumb.spec.ts

@@ -111,7 +111,7 @@ describe('breadcrumb', () => {
       breadcrumb = fixture.debugElement.query(By.directive(NzBreadCrumbComponent));
 
       fixture.ngZone!.run(() => {
-        router = TestBed.get(Router);
+        router = TestBed.inject(Router);
         router.initialNavigation();
 
         // Should generate 2 breadcrumbs when reaching out of the `data` scope.
@@ -156,7 +156,7 @@ describe('breadcrumb', () => {
       breadcrumb = fixture.debugElement.query(By.directive(NzBreadCrumbComponent));
 
       fixture.ngZone!.run(() => {
-        router = TestBed.get(Router);
+        router = TestBed.inject(Router);
         router.initialNavigation();
 
         // Should nzRouteLabel value is 'customBreadcrumb'

components/calendar/calendar-header.component.ts

@@ -9,6 +9,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { DateHelperService, NzI18nService as I18n } from 'ng-zorro-antd/i18n';
+import { NzSelectSizeType } from 'ng-zorro-antd/select';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -72,7 +73,7 @@ export class NzCalendarHeaderComponent implements OnInit {
     return this.activeDate.getMonth();
   }
 
-  get size(): string {
+  get size(): NzSelectSizeType {
     return this.fullscreen ? 'default' : 'small';
   }
 

components/calendar/calendar.component.ts

@@ -59,23 +59,25 @@ type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
       </div>
     </div>
     <ng-template #monthModeTable>
+      <!--  TODO(@wenqi73) [cellRender] [fullCellRender] -->
       <date-table
         [prefixCls]="prefixCls"
         [value]="activeDate"
         [activeDate]="activeDate"
-        [cellRender]="dateCell"
-        [fullCellRender]="dateFullCell"
+        [cellRender]="$any(dateCell)"
+        [fullCellRender]="$any(dateFullCell)"
         (valueChange)="onDateSelect($event)"
       ></date-table>
     </ng-template>
 
+    <!--  TODO(@wenqi73) [cellRender] [fullCellRender] -->
     <ng-template #yearModeTable>
       <month-table
         [prefixCls]="prefixCls"
         [value]="activeDate"
         [activeDate]="activeDate"
-        [cellRender]="monthCell"
-        [fullCellRender]="monthFullCell"
+        [cellRender]="$any(monthCell)"
+        [fullCellRender]="$any(monthFullCell)"
         (valueChange)="onDateSelect($event)"
       ></month-table>
     </ng-template>

components/card/card.component.ts

@@ -19,7 +19,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { BooleanInput, NzSizeDSType } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NgStyleInterface, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -84,7 +84,7 @@ export class NzCardComponent implements OnDestroy {
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzBordered: boolean = true;
   @Input() @InputBoolean() nzLoading = false;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzHoverable: boolean = false;
-  @Input() nzBodyStyle?: { [key: string]: string };
+  @Input() nzBodyStyle: NgStyleInterface | null = null;
   @Input() nzCover?: TemplateRef<void>;
   @Input() nzActions: Array<TemplateRef<void>> = [];
   @Input() nzType: string | 'inner' | null = null;

components/cascader/cascader.component.ts

@@ -212,14 +212,14 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
   @Input() nzColumnClassName?: string;
   @Input() nzExpandTrigger: NzCascaderExpandTrigger = 'click';
   @Input() nzValueProperty = 'value';
-  @Input() nzLabelRender?: TemplateRef<void>;
+  @Input() nzLabelRender: TemplateRef<void> | null = null;
   @Input() nzLabelProperty = 'label';
   @Input() nzNotFoundContent?: string | TemplateRef<void>;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzSize: NzCascaderSize = 'default';
   @Input() nzShowSearch: boolean | NzShowSearchOptions = false;
   @Input() nzPlaceHolder: string = '';
   @Input() nzMenuClassName?: string;
-  @Input() nzMenuStyle?: NgStyleInterface;
+  @Input() nzMenuStyle: NgStyleInterface | null = null;
   @Input() nzMouseEnterDelay: number = 150; // ms
   @Input() nzMouseLeaveDelay: number = 150; // ms
   @Input() nzTriggerAction: NzCascaderTriggerType | NzCascaderTriggerType[] = ['click'] as NzCascaderTriggerType[];

components/checkbox/checkbox-group.component.ts

@@ -30,8 +30,8 @@ export interface NzCheckBoxOptionInterface {
       class="ant-checkbox-group-item"
       *ngFor="let o of options; trackBy: trackByOption"
       [nzDisabled]="o.disabled || nzDisabled"
-      [(nzChecked)]="o.checked"
-      (nzCheckedChange)="onChange(options)"
+      [nzChecked]="o.checked!"
+      (nzCheckedChange)="onCheckedChange(o, $event)"
     >
       <span>{{ o.label }}</span>
     </label>
@@ -59,6 +59,11 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O
     return option.value;
   }
 
+  onCheckedChange(option: NzCheckBoxOptionInterface, checked: boolean): void {
+    option.checked = checked;
+    this.onChange(this.options);
+  }
+
   constructor(private elementRef: ElementRef, private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef) {}
 
   ngOnInit(): void {

components/collapse/collapse-panel.component.ts

@@ -40,8 +40,8 @@ const NZ_CONFIG_COMPONENT_NAME = 'collapsePanel';
   template: `
     <div role="tab" [attr.aria-expanded]="nzActive" class="ant-collapse-header" (click)="clickHeader()">
       <ng-container *ngIf="nzShowArrow">
-        <ng-container *nzStringTemplateOutlet="nzExpandedIcon">
-          <i nz-icon [nzType]="nzExpandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0"></i>
+        <ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
+          <i nz-icon [nzType]="expandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0"></i>
         </ng-container>
       </ng-container>
       <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>

components/core/outlet/string_template_outlet.directive.ts

@@ -13,20 +13,29 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   selector: '[nzStringTemplateOutlet]',
   exportAs: 'nzStringTemplateOutlet'
 })
-export class NzStringTemplateOutletDirective implements OnChanges {
+export class NzStringTemplateOutletDirective<_T = unknown> implements OnChanges {
   private embeddedViewRef: EmbeddedViewRef<NzSafeAny> | null = null;
+  private context = new NzStringTemplateOutletContext();
   @Input() nzStringTemplateOutletContext: NzSafeAny | null = null;
-  @Input() nzStringTemplateOutlet: string | TemplateRef<NzSafeAny> | null = null;
+  @Input() nzStringTemplateOutlet: NzSafeAny | TemplateRef<NzSafeAny> = null;
+
+  static ngTemplateContextGuard<T>(_dir: NzStringTemplateOutletDirective<T>, _ctx: NzSafeAny): _ctx is NzStringTemplateOutletContext {
+    return true;
+  }
 
   private recreateView(): void {
     this.viewContainer.clear();
     const isTemplateRef = this.nzStringTemplateOutlet instanceof TemplateRef;
     const templateRef = (isTemplateRef ? this.nzStringTemplateOutlet : this.templateRef) as NzSafeAny;
-    this.embeddedViewRef = this.viewContainer.createEmbeddedView(templateRef, this.nzStringTemplateOutletContext);
+    this.embeddedViewRef = this.viewContainer.createEmbeddedView(
+      templateRef,
+      isTemplateRef ? this.nzStringTemplateOutletContext : this.context
+    );
   }
 
   private updateContext(): void {
-    const newCtx = this.nzStringTemplateOutletContext;
+    const isTemplateRef = this.nzStringTemplateOutlet instanceof TemplateRef;
+    const newCtx = isTemplateRef ? this.nzStringTemplateOutletContext : this.context;
     const oldCtx = this.embeddedViewRef!.context as NzSafeAny;
     if (newCtx) {
       for (const propName of Object.keys(newCtx)) {
@@ -38,8 +47,8 @@ export class NzStringTemplateOutletDirective implements OnChanges {
   constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef<NzSafeAny>) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    const shouldRecreateView = (ctxChanges: SimpleChanges): boolean => {
-      const { nzStringTemplateOutletContext, nzStringTemplateOutlet } = ctxChanges;
+    const { nzStringTemplateOutletContext, nzStringTemplateOutlet } = changes;
+    const shouldRecreateView = (): boolean => {
       let shouldOutletRecreate = false;
       if (nzStringTemplateOutlet) {
         if (nzStringTemplateOutlet.firstChange) {
@@ -67,7 +76,12 @@ export class NzStringTemplateOutletDirective implements OnChanges {
       const shouldContextRecreate = nzStringTemplateOutletContext && hasContextShapeChanged(nzStringTemplateOutletContext);
       return shouldContextRecreate || shouldOutletRecreate;
     };
-    const recreateView = shouldRecreateView(changes);
+
+    if (nzStringTemplateOutlet) {
+      this.context.$implicit = nzStringTemplateOutlet.currentValue;
+    }
+
+    const recreateView = shouldRecreateView();
     if (recreateView) {
       /** recreate view when context shape or outlet change **/
       this.recreateView();
@@ -77,3 +91,7 @@ export class NzStringTemplateOutletDirective implements OnChanges {
     }
   }
 }
+
+export class NzStringTemplateOutletContext {
+  public $implicit: NzSafeAny;
+}

components/core/outlet/string_template_outlet.spec.ts

@@ -96,7 +96,9 @@ describe('string template outlet', () => {
 @Component({
   template: `
     TargetText
-    <ng-container *nzStringTemplateOutlet="stringTemplateOutlet; context: context">{{ stringTemplateOutlet }}</ng-container>
+    <ng-container *nzStringTemplateOutlet="stringTemplateOutlet; context: context; let stringTemplateOutlet">{{
+      stringTemplateOutlet
+    }}</ng-container>
     <ng-template #stringTpl let-data>The data is {{ data }}</ng-template>
     <ng-template #emptyTpl>Empty Template</ng-template>
     <ng-template #dataTimeTpl let-data let-time="time">The data is {{ data }}, The time is {{ time }}</ng-template>

components/core/services/scroll.spec.ts

@@ -1,12 +1,13 @@
 /* tslint:disable:no-unused-variable no-inferrable-types no-any prefer-const */
 import { DOCUMENT, PlatformLocation } from '@angular/common';
-import { ReflectiveInjector } from '@angular/core';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 import { NzScrollService } from './scroll';
 
 describe('NzScrollService', () => {
   const TOP: number = 10;
-  let injector: ReflectiveInjector;
+  let injector: Injector;
   let document: MockDocument;
   let scrollService: NzScrollService;
 
@@ -32,12 +33,15 @@ describe('NzScrollService', () => {
   });
 
   beforeEach(() => {
-    injector = ReflectiveInjector.resolveAndCreate([
-      NzScrollService,
-      { provide: DOCUMENT, useClass: MockDocument },
-      { provide: PlatformLocation, useClass: MockPlatformLocation }
-    ]);
-    document = injector.get(DOCUMENT);
+    injector = TestBed.configureTestingModule({
+      providers: [
+        NzScrollService,
+        { provide: DOCUMENT, useClass: MockDocument },
+        { provide: PlatformLocation, useClass: MockPlatformLocation }
+      ]
+    });
+
+    document = injector.get<MockDocument>(DOCUMENT);
     scrollService = injector.get(NzScrollService);
   });
 

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

@@ -18,6 +18,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { CandyDate } from 'ng-zorro-antd/core/time';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
 import { DateHelperService, NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
@@ -35,7 +36,7 @@ import { PREFIX_CLASS } from './util';
       <div *ngIf="extraFooter" class="{{ prefixCls }}-footer-extra">
         <ng-container [ngSwitch]="true">
           <ng-container *ngSwitchCase="isTemplateRef(extraFooter)">
-            <ng-container *ngTemplateOutlet="extraFooter"></ng-container>
+            <ng-container *ngTemplateOutlet="$any(extraFooter)"></ng-container>
           </ng-container>
           <ng-container *ngSwitchCase="isNonEmptyString(extraFooter)">
             <span [innerHTML]="extraFooter"></span>
@@ -83,7 +84,7 @@ export class CalendarFooterComponent implements OnChanges {
   @Input() okDisabled: boolean = false;
   @Input() disabledDate?: (d: Date) => boolean;
   @Input() extraFooter?: TemplateRef<void> | string;
-  @Input() rangeQuickSelector?: TemplateRef<void>;
+  @Input() rangeQuickSelector: TemplateRef<NzSafeAny> | null = null;
 
   @Output() readonly clickOk = new EventEmitter<void>();
   @Output() readonly clickToday = new EventEmitter<CandyDate>();