feat(module: all): support Angular 12

.travis.yml

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

angular.json

@@ -16,7 +16,6 @@
             "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",
@@ -31,7 +30,13 @@
             "styles": [
               "site/src/styles.less"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -47,16 +52,23 @@
                   "with": "./site/src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "extractLicenses": false,
               "vendorChunk": false,
               "buildOptimizer": true,
               "serviceWorker": false
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -93,7 +105,7 @@
       "prefix": "",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "components/tsconfig.lib.json",
             "project": "components/ng-package.json"
@@ -103,7 +115,7 @@
               "tsConfig": "components/tsconfig.lib.prod.json"
             }
           }
-},
+        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {

components/badge/demo/basic.ts

@@ -52,7 +52,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .dot-badge .am-badge-dot {
+      :host ::ng-deep .dot-badge .am-badge-dot {
         right: -8px;
       }
       .corner-badge {
@@ -62,25 +62,25 @@ import { Component } from '@angular/core';
         font-size: 17px;
         color: #000;
       }
-      /deep/ .special-badge .am-list-line {
+      :host ::ng-deep .special-badge .am-list-line {
         padding-right: 0;
       }
-      /deep/ .special-badge .am-list-line .am-list-extra {
+      :host ::ng-deep .special-badge .am-list-line .am-list-extra {
         padding: 0;
         height: 44px;
       }
-      /deep/ .special-badge .am-badge {
+      :host ::ng-deep .special-badge .am-badge {
         transform: rotate(45deg);
         transform-origin: right bottom;
         right: 0px;
         top: 13px;
         width: 50px;
       }
-      /deep/ .special-badge .am-badge-text {
+      :host ::ng-deep .special-badge .am-badge-text {
         border-radius: 1px;
       }
 
-      /deep/ .am-badge {
+      :host ::ng-deep .am-badge {
         text-align: right;
         font-size: 17px;
         color: #000;

components/calendar/style/index.less

@@ -171,7 +171,7 @@
   .cell {
     height: 24 * @hd;
     display: flex;
-    width: 100/7%;
+    width: calc(100% / 7);
     justify-content: center;
     align-items: center;
     color: @color-text-base;
@@ -293,7 +293,7 @@
     .cell {
       display: flex;
       flex-direction: column;
-      width: 100/7%;
+      width: calc(100% / 7);
       justify-content: center;
       align-items: center;
 

components/drawer/demo/basic.ts

@@ -38,19 +38,19 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .my-drawer {
+      :host ::ng-deep .my-drawer {
         position: relative;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }
 
-      /deep/ .my-drawer .am-drawer-sidebar {
+      :host ::ng-deep .my-drawer .am-drawer-sidebar {
         background-color: #fff;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }
 
-      /deep/ .my-drawer .am-drawer-sidebar .am-list {
+      :host ::ng-deep .my-drawer .am-drawer-sidebar .am-list {
         width: 300px;
         padding: 0;
       }

components/drawer/demo/dock.ts

@@ -39,19 +39,19 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .my-drawer {
+      :host ::ng-deep .my-drawer {
         position: relative;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }
 
-      /deep/ .my-drawer .am-drawer-sidebar {
+      :host ::ng-deep .my-drawer .am-drawer-sidebar {
         background-color: #fff;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }
 
-      /deep/ .my-drawer .am-drawer-sidebar .am-list {
+      :host ::ng-deep .my-drawer .am-drawer-sidebar .am-list {
         width: 300px;
         padding: 0;
       }

components/grid/demo/basic.ts

@@ -50,7 +50,7 @@ import { Component } from '@angular/core';
         font-size: 14px;
         padding: 15px 0 9px 15px;
       }
-      /deep/.not-square-grid .am-grid-icon {
+      :host ::ng-deep.not-square-grid .am-grid-icon {
         width: 40px;
         height: 60px;
       }

components/input-item/demo/basic.ts

@@ -171,7 +171,7 @@ import { ToastService } from 'ng-zorro-antd-mobile';
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
       }
-      /deep/ .am-list-body InputItem:not(:last-child) .am-list-line {
+      :host ::ng-deep .am-list-body InputItem:not(:last-child) .am-list-line {
         border-bottom: 1px solid #ddd;
       }
 

components/karma.conf.js

@@ -9,15 +9,19 @@ module.exports = function(config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true
+    coverageReporter: {
+      subdir: '.',
+      dir: require('path').join(__dirname, '../coverage'),
+      reporters: [
+        { type: 'html' },
+        { type: 'lcovonly' },
+      ],
     },
     angularCli: {
       environment: 'dev'

components/list/demo/basic.ts

@@ -90,7 +90,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .my-list .spe .am-list-extra {
+      :host ::ng-deep .my-list .spe .am-list-extra {
         flex-basis: initial;
       }
     `

components/list/demo/form.ts

@@ -59,7 +59,7 @@ import { FormGroup, Validators, FormControl } from '@angular/forms';
   `,
   styles: [
     `
-      /deep/ .my-list .spe .am-list-extra {
+      :host ::ng-deep .my-list .spe .am-list-extra {
         flex-basis: initial;
       }
     `

components/modal/demo/prompt.ts

@@ -33,7 +33,7 @@ export class DemoModalPromptComponent {
             new Promise(resolve => {
               this._toast.info('onPress promise resolve', 1000);
               setTimeout(() => {
-                resolve();
+                resolve(value);
                 console.log(`value:${value}`);
               }, 1000);
             })

components/modal/modal.component.spec.ts

@@ -345,7 +345,7 @@ export class TestModalBasicComponent {
           onPress: value =>
             new Promise(resolve => {
               setTimeout(() => {
-                resolve();
+                resolve(value);
                 console.log(`value:${value}`);
               }, 1000);
             })

components/package.json

@@ -22,27 +22,26 @@
     "url": "https://github.com/NG-ZORRO/ng-zorro-antd-mobile/issues"
   },
   "dependencies": {
-    "@angular/cdk": "^11.0.3",
-    "@angular/animations": "^11.0.5",
-    "@ant-design/icons-angular": "^11.0.1"
+    "@angular/animations": "^12.1.1",
+    "@angular/cdk": "^12.1.1",
+    "@angular/common": "^12.1.1",
+    "@angular/compiler": "^12.1.1",
+    "@angular/core": "^12.1.1",
+    "@angular/forms": "^12.1.1",
+    "@angular/platform-browser": "^12.1.1",
+    "@angular/platform-browser-dynamic": "^12.1.1",
+    "@angular/router": "^12.1.1",
+    "@ant-design/icons-angular": "^12.0.3"
   },
   "devDependencies": {
-    "@angular/common": "^11.0.5",
-    "@angular/compiler": "^11.0.5",
-    "@angular/core": "^11.0.5",
-    "@angular/forms": "^11.0.5",
-    "@angular/http": "^7.2.16",
-    "@angular/platform-browser": "^11.0.5",
-    "@angular/platform-browser-dynamic": "^11.0.5",
-    "@angular/router": "^11.0.5",
-    "@angular/upgrade": "^11.0.5",
+    "@angular/upgrade": "^12.1.1",
     "@angular-devkit/build-angular": "^0.1100.5",
-    "@angular/cli": "^11.0.5",
-    "@angular/compiler-cli": "^11.0.5",
-    "@angular/platform-server": "^11.0.5",
-    "tslib": "^2.0.1",
+    "@angular/cli": "^12.1.1",
+    "@angular/compiler-cli": "^12.1.1",
+    "@angular/platform-server": "^12.1.1",
+    "tslib": "^2.3.0",
     "tslint": "~6.1.3",
-    "typescript": "~4.0.5"
+    "typescript": "~4.3.5"
   },
   "lint-staged": {
     "{src,docs}/**/*.{scss}": [

components/polyfills.ts

@@ -49,7 +49,7 @@ import 'web-animations-js'; // Run `npm install --save web-animations-js`.
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

components/radio/demo/basic.ts

@@ -53,7 +53,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .my-radio .am-radio {
+      :host ::ng-deep .my-radio .am-radio {
         padding: 2.5px;
         border: 1px solid #ccc;
         border-radius: 50%;

components/swipe-action/demo/basic.ts

@@ -67,7 +67,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/.btnClass {
+      :host ::ng-deep.btnClass {
         background-color: #f4333c;
         color: white;
       }

components/tabs/demo/basic.ts

@@ -76,7 +76,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .am-badge {
+      :host ::ng-deep .am-badge {
         text-align: right;
       }
     `

components/tabs/demo/dynamic.ts

@@ -24,7 +24,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .am-badge {
+      :host ::ng-deep .am-badge {
         text-align: right;
       }
     `

components/tabs/demo/fixedtabtitlesize.ts

@@ -70,7 +70,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .am-badge {
+      :host ::ng-deep .am-badge {
         text-align: right;
       }
     `

components/tabs/demo/multitabs.ts

@@ -59,7 +59,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .am-badge {
+      :host ::ng-deep .am-badge {
         text-align: right;
       }
     `

components/tabs/demo/noanim.ts

@@ -36,7 +36,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .am-badge {
+      :host ::ng-deep .am-badge {
         text-align: right;
       }
     `

components/tabs/demo/vertical.ts

@@ -37,7 +37,7 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      /deep/ .am-badge {
+      :host ::ng-deep .am-badge {
         text-align: right;
       }
     `

components/tabs/tabs.component.spec.ts

@@ -442,7 +442,7 @@ describe('tab', () => {
   `,
   styles: [
     `
-      /deep/ .am-tabs-default-bar-content {
+      :host ::ng-deep .am-tabs-default-bar-content {
         height: 100px;
       }
     `