feat: add strictTemplates (#1184)

angular.json

@@ -51,7 +51,27 @@
               "@antv/attr",
               "@antv/adjust",
               "@antv/component",
-              "@antv/util"
+              "@antv/util",
+              "date-fns/format",
+              "date-fns/parse",
+              "date-fns/getISOWeek",
+              "date-fns/addDays",
+              "date-fns/differenceInCalendarDays",
+              "date-fns/addSeconds",
+              "date-fns/subYears",
+              "date-fns/subWeeks",
+              "date-fns/subMonths",
+              "date-fns/startOfYear",
+              "date-fns/startOfWeek",
+              "date-fns/startOfMonth",
+              "date-fns/startOfDay",
+              "date-fns/parseISO",
+              "date-fns/endOfYear",
+              "date-fns/endOfWeek",
+              "date-fns/endOfMonth",
+              "date-fns/endOfDay",
+              "date-fns/formatDistanceToNow",
+              "date-fns/add"
             ]
           },
           "configurations": {

package.json

@@ -46,20 +46,20 @@
     "ssr:prerender": "npm run site:build && npm run ng-high-memory run site:prerender"
   },
   "dependencies": {
-    "@angular/animations": "~11.1.0",
-    "@angular/common": "~11.1.0",
-    "@angular/compiler": "~11.1.0",
-    "@angular/core": "~11.1.0",
-    "@angular/forms": "~11.1.0",
-    "@angular/platform-browser": "~11.1.0",
-    "@angular/platform-browser-dynamic": "~11.1.0",
-    "@angular/router": "~11.1.0",
+    "@angular/animations": "~11.2.1",
+    "@angular/common": "~11.2.1",
+    "@angular/compiler": "~11.2.1",
+    "@angular/core": "~11.2.1",
+    "@angular/forms": "~11.2.1",
+    "@angular/platform-browser": "~11.2.1",
+    "@angular/platform-browser-dynamic": "~11.2.1",
+    "@angular/router": "~11.2.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3",
-    "@angular/service-worker": "~11.1.0",
-    "@angular/platform-server": "~11.1.0",
-    "@angular/elements": "~11.1.0",
+    "@angular/service-worker": "~11.2.1",
+    "@angular/platform-server": "~11.2.1",
+    "@angular/elements": "~11.2.1",
     "@antv/data-set": "^0.11.7",
     "@antv/g2": "^4.1.4",
     "@ngx-translate/core": "^13.0.0",
@@ -70,7 +70,7 @@
     "extend": "^3.0.2",
     "file-saver": "^2.0.5",
     "ng-github-button": "^11.0.1",
-    "ng-zorro-antd": "~11.1.0",
+    "ng-zorro-antd": "~11.2.0",
     "ngx-color": "^6.2.0",
     "ngx-countdown": "^11.0.1",
     "ngx-highlight-js": "^11.1.0",
@@ -82,20 +82,20 @@
     "aos": "^3.0.0-beta.6",
     "docsearch.js": "^2.6.3",
     "@ng-util/monaco-editor": "^11.1.0",
-    "@nguniversal/express-engine": "^11.1.0",
+    "@nguniversal/express-engine": "~11.2.0",
     "express": "^4.17.1",
     "isutf8": "^3.1.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1101.1",
-    "@angular/cli": "~11.1.1",
-    "@angular/compiler-cli": "~11.1.0",
+    "@angular-devkit/build-angular": "~0.1102.1",
+    "@angular/cli": "~11.2.1",
+    "@angular/compiler-cli": "~11.2.1",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.2.0",
+    "karma": "~6.1.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
@@ -104,14 +104,14 @@
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.1.2",
-    "@angular/language-service": "~11.1.0",
+    "@angular/language-service": "~11.2.1",
     "@types/jasminewd2": "~2.0.3",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-junit-reporter": "^2.0.1",
     "karma-spec-reporter": "0.0.32",
     "karma-viewport": "^1.0.6",
     "@types/aos": "^3.0.3",
-    "@schematics/schematics": "~0.1101.1",
+    "@schematics/schematics": "~0.1102.1",
     "@types/file-saver": "^2.0.1",
     "@types/deep-extend": "^0.4.31",
     "@types/extend": "^3.0.1",

packages/abc/avatar-list/avatar-list.component.ts

@@ -13,6 +13,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { InputNumber, NumberInput } from '@delon/util/decorator';
+import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { AvatarListItemComponent } from './avatar-list-item.component';
@@ -42,7 +43,7 @@ export class AvatarListComponent implements AfterViewInit, OnChanges, OnDestroy
   dir: Direction = 'ltr';
 
   cls = '';
-  avatarSize = '';
+  avatarSize: NzSizeLDSType = 'default';
   @Input()
   set size(value: 'large' | 'small' | 'mini' | 'default') {
     this.cls = 'avatar-list__item' + (value === 'default' ? '' : ` avatar-list__${value}`);

packages/abc/date-picker/range.component.ts

@@ -6,7 +6,8 @@ import { fixEndTimeOfRange, getTimeDistance } from '@delon/util/date-time';
 import { InputBoolean } from '@delon/util/decorator';
 import { deepMergeKey } from '@delon/util/other';
 import { FunctionProp, NzSafeAny } from 'ng-zorro-antd/core/types';
-import { NzRangePickerComponent } from 'ng-zorro-antd/date-picker';
+import { NzDatePickerSizeType, NzRangePickerComponent } from 'ng-zorro-antd/date-picker';
+import { NzDatePickerI18nInterface } from 'ng-zorro-antd/i18n';
 
 /**
  * @deprecated Will be removed in 12.0.0, Pls used `nz-range-picker` and `[extend]` directive instead, for examples:
@@ -31,6 +32,8 @@ import { NzRangePickerComponent } from 'ng-zorro-antd/date-picker';
   ],
 })
 export class RangePickerComponent implements ControlValueAccessor {
+  static ngAcceptInputType_shortcut: AlainDateRangePickerShortcut | string | null;
+
   private onChangeFn: (val: Date) => void;
   private _shortcut: AlainDateRangePickerShortcut;
   private defaultShortcuts: AlainDateRangePickerShortcut;
@@ -60,10 +63,10 @@ export class RangePickerComponent implements ControlValueAccessor {
   @Input() nzAutoFocus = false;
   @Input() nzClassName: string;
   @Input() nzDisabled: boolean;
-  @Input() nzSize: string;
-  @Input() nzStyle: string;
+  @Input() nzSize: NzDatePickerSizeType = 'default';
+  @Input() nzStyle: { [klass: string]: any };
   @Input() nzDisabledDate: (d: Date) => boolean;
-  @Input() nzLocale: object;
+  @Input() nzLocale: NzDatePickerI18nInterface;
   @Input() nzPopupStyle: object;
   @Input() nzDropdownClassName: string;
   @Input() nzPlaceHolder: string | string[];

packages/abc/date-picker/range.directive.ts

@@ -26,14 +26,15 @@ import { RangePickerShortcutTplComponent } from './range-shortcut.component';
   exportAs: 'extendRangePicker',
 })
 export class RangePickerDirective implements OnDestroy, AfterViewInit {
+  static ngAcceptInputType_shortcut: AlainDateRangePickerShortcut | string | null;
+
   private defaultShortcuts: AlainDateRangePickerShortcut;
   private _shortcut: AlainDateRangePickerShortcut;
   private destroy$ = new Subject<void>();
   private shortcutFactory: ComponentRef<RangePickerShortcutTplComponent> | null = null;
   start: Date | null = null;
   end: Date | null = null;
 
-  @Input() ngModelEnd: Date | null;
   @Input()
   set shortcut(val: AlainDateRangePickerShortcut | null) {
     const item = deepMergeKey({ list: [] }, true, this.defaultShortcuts, val == null ? {} : val) as AlainDateRangePickerShortcut;
@@ -49,7 +50,8 @@ export class RangePickerDirective implements OnDestroy, AfterViewInit {
   get shortcut(): AlainDateRangePickerShortcut | null {
     return this._shortcut;
   }
-  @Output() readonly ngModelEndChange = new EventEmitter<Date | null>();
+  @Input() ngModelEnd: any;
+  @Output() readonly ngModelEndChange = new EventEmitter<any>();
 
   private get dp(): NzDatePickerComponent {
     return this.nativeComp.datePicker;

packages/abc/ellipsis/ellipsis.component.ts

@@ -57,7 +57,7 @@ export class EllipsisComponent implements AfterViewInit, OnChanges {
     private el: ElementRef,
     private ngZone: NgZone,
     private dom: DomSanitizer,
-    @Inject(DOCUMENT) private doc: Document,
+    @Inject(DOCUMENT) private doc: any,
     private cdr: ChangeDetectorRef,
   ) {}
 

packages/abc/exception/exception.component.ts

@@ -47,7 +47,7 @@ export class ExceptionComponent implements OnInit, OnDestroy {
 
   @Input()
   set type(value: ExceptionType) {
-    const item = {
+    const item: { img: string; title: string } = {
       403: {
         img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
         title: '403',

packages/abc/global-footer/global-footer-item.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { BooleanInput, InputBoolean } from '@delon/util/decorator';
 
 @Component({
@@ -12,7 +12,7 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator';
 export class GlobalFooterItemComponent {
   static ngAcceptInputType_blankTarget: BooleanInput;
 
-  @ViewChild('host', { static: true }) host: ElementRef;
+  @ViewChild('host', { static: true }) host: TemplateRef<void>;
 
   @Input() href: string;
   @Input() @InputBoolean() blankTarget: boolean;

packages/abc/global-footer/global-footer.component.ts

@@ -50,12 +50,12 @@ export class GlobalFooterComponent implements OnInit, OnDestroy {
 
   constructor(
     private router: Router,
-    @Inject(WINDOW) private win: Window,
+    @Inject(WINDOW) private win: any,
     private dom: DomSanitizer,
     @Optional() private directionality: Directionality,
   ) {}
 
-  to(item: GlobalFooterLink): void {
+  to(item: GlobalFooterLink | GlobalFooterItemComponent): void {
     if (!item.href) {
       return;
     }

packages/abc/let/let.directive.ts

@@ -1,14 +1,14 @@
 import { Directive, Inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 
 export class LetContext<T> {
-  constructor(private readonly internalDirectiveInstance: LetDirective<T>) {}
+  constructor(private readonly dir: LetDirective<T>) {}
 
   get $implicit(): T {
-    return this.internalDirectiveInstance.let;
+    return this.dir.let;
   }
 
   get let(): T {
-    return this.internalDirectiveInstance.let;
+    return this.dir.let;
   }
 }
 

packages/abc/loading/loading.component.html

@@ -1,8 +1,8 @@
-<div class="loading-default__icon" *ngIf="options.type !== 'text'">
-  <ng-container [ngSwitch]="options.type">
+<div class="loading-default__icon" *ngIf="options.type! !== 'text'">
+  <ng-container [ngSwitch]="options.type!">
     <nz-spin *ngSwitchCase="'spin'" nzSimple></nz-spin>
-    <i *ngSwitchCase="'icon'" nz-icon [nzType]="icon.type" [nzTheme]="icon.theme" [nzSpin]="icon.spin"></i>
-    <div *ngSwitchDefault class="loading-default__custom" [ngStyle]="custom.style" [innerHTML]="custom.html"></div>
+    <i *ngSwitchCase="'icon'" nz-icon [nzType]="icon.type!" [nzTheme]="icon.theme!" [nzSpin]="icon.spin"></i>
+    <div *ngSwitchDefault class="loading-default__custom" [ngStyle]="custom.style!" [innerHTML]="custom.html"></div>
   </ng-container>
 </div>
 <div *ngIf="options.text" class="loading-default__text">{{ options.text }}</div>

packages/abc/notice-icon/notice-icon.component.html

@@ -3,17 +3,17 @@
     <i nz-icon nzType="bell" [ngClass]="btnIconClass"></i>
   </nz-badge>
 </ng-template>
-<div *ngIf="data?.length === 0">
+<div *ngIf="data!.length === 0">
   <ng-template [ngTemplateOutlet]="badgeTpl"></ng-template>
 </div>
 <div
-  *ngIf="data?.length > 0"
+  *ngIf="data!.length > 0"
   nz-dropdown
   [nzVisible]="popoverVisible"
   (nzVisibleChange)="onVisibleChange($event)"
   nzTrigger="click"
   nzPlacement="bottomRight"
-  [nzOverlayClassName]="['header-dropdown', 'notice-icon']"
+  nzOverlayClassName="header-dropdown notice-icon"
   [nzDropdownMenu]="noticeMenu"
 >
   <ng-template [ngTemplateOutlet]="badgeTpl"></ng-template>

packages/abc/page-header/page-header.component.ts

@@ -61,15 +61,15 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit, On
     return this.menuSrv.getPathByUrl(this.router.url, this.recursiveBreadcrumb);
   }
 
-  _titleVal: string = '';
+  _titleVal: string | null = '';
   paths: PageHeaderPath[] = [];
 
   // #region fields
 
   _title: string | null;
-  _titleTpl: TemplateRef<void>;
+  _titleTpl: TemplateRef<any>;
   @Input()
-  set title(value: string | TemplateRef<void>) {
+  set title(value: string | TemplateRef<void> | null) {
     if (value instanceof TemplateRef) {
       this._title = null;
       this._titleTpl = value;
@@ -90,7 +90,7 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit, On
   @Input() @InputBoolean() syncTitle: boolean;
   @Input() @InputBoolean() fixed: boolean;
   @Input() @InputNumber() fixedOffsetTop: number;
-  @Input() breadcrumb: TemplateRef<void>;
+  @Input() breadcrumb: TemplateRef<any>;
   @Input() @InputBoolean() recursiveBreadcrumb: boolean;
   @Input() logo: TemplateRef<void>;
   @Input() action: TemplateRef<void>;

packages/abc/pdf/demo/design.md

@@ -22,7 +22,7 @@ import { Subject } from 'rxjs';
 @Component({
   selector: 'components-pdf-design',
   template: `
-    <div nz-row nzGutter="16">
+    <div nz-row [nzGutter]="16">
       <div nz-col nzSpan="8">
         <div se-container col="1">
           <se label="Url of the pdf file (Press enter to run)">

packages/abc/pdf/pdf.component.ts

@@ -148,7 +148,7 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
     private lazySrv: LazyService,
     private platform: Platform,
     private el: ElementRef<HTMLElement>,
-    @Optional() @Inject(DOCUMENT) private doc: Document,
+    @Optional() @Inject(DOCUMENT) private doc: any,
   ) {
     const cog = configSrv.merge('pdf', PDF_DEFULAT_CONFIG)!;
     Object.assign(this, cog);

packages/abc/qr/demo/design.md

@@ -39,7 +39,7 @@ import { Component } from '@angular/core';
         <se-container col="1">
           <se label="背景">
             <nz-input-group>
-              <div nz-row nzGutter="8">
+              <div nz-row [nzGutter]="8">
                 <div nz-col nzSpan="12">
                   <input nz-input type="color" [(ngModel)]="background" [ngModelOptions]="{ standalone: true }" />
                 </div>
@@ -57,7 +57,7 @@ import { Component } from '@angular/core';
           </se>
           <se label="前景">
             <nz-input-group>
-              <div nz-row nzGutter="8">
+              <div nz-row [nzGutter]="8">
                 <div nz-col nzSpan="12">
                   <input nz-input type="color" [(ngModel)]="foreground" [ngModelOptions]="{ standalone: true }" />
                 </div>

packages/abc/qr/qr.component.ts

@@ -49,7 +49,7 @@ export class QRComponent implements OnChanges, AfterViewInit, OnDestroy {
   @Input() backgroundAlpha: number;
   @Input() foreground: string;
   @Input() foregroundAlpha: number;
-  @Input() level: 'L' | 'M' | 'Q' | 'H';
+  @Input() level: string;
   @Input() mime: string;
   @Input() @InputNumber() padding: number;
   @Input() @InputNumber() size: number;
@@ -102,7 +102,7 @@ export class QRComponent implements OnChanges, AfterViewInit, OnDestroy {
       backgroundAlpha: this.backgroundAlpha,
       foreground: this.foreground,
       foregroundAlpha: this.foregroundAlpha,
-      level: this.level,
+      level: this.level as any,
       mime: this.mime,
       padding: this.padding,
       size: this.size,

packages/abc/quick-menu/quick-menu.component.html

@@ -2,7 +2,7 @@
   <div class="quick-menu__ctrl" [ngStyle]="ctrlStyle">
     <div class="quick-menu__ctrl-icon">
       <ng-container *nzStringTemplateOutlet="icon">
-        <i nz-icon [nzType]="icon"></i>
+        <i nz-icon [nzType]="$any(icon)"></i>
       </ng-container>
     </div>
   </div>