chore: bump angular from 12.0 to 12.1 (#6804)

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
-
-npx --no-install tsc -p components/tsconfig.json --noEmit && npx --no-install lint-staged
+export NODE_OPTIONS="--max-old-space-size=4096"
+npx --no-install tsc -p components/tsconfig.json --noEmit
+npx --no-install lint-staged

angular.json

@@ -11,7 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist",
+            "outputPath": "dist/browser",
             "index": "./site/doc/index.html",
             "main": "./site/doc/main.ts",
             "tsConfig": "./site/doc/tsconfig.app.json",
@@ -148,7 +148,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/iframe",
+            "outputPath": "dist/browser/iframe",
             "index": "./site/iframe/index.html",
             "main": "./site/iframe/main.ts",
             "tsConfig": "./site/iframe/tsconfig.app.json",

azure-pipelines.yml

@@ -29,10 +29,10 @@ stages:
         - script: |
             npm run build
             export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ng-zorro-antd.surge.sh
-            echo 'version' >> dist/.surgeignore
-            echo 'issue-helper' >> dist/.surgeignore
-            npx surge --project ./dist --domain $DEPLOY_DOMAIN
-            tar czvf build.tgz lib dist
+            echo 'version' >> dist/browser/.surgeignore
+            echo 'issue-helper' >> dist/browser/.surgeignore
+            npx surge --project ./dist/browser --domain $DEPLOY_DOMAIN
+            tar --transform='flags=r;s|browser|dist|' -cvzf build.tgz lib -C dist browser
 
         - task: CopyFiles@2
           inputs:

components/list/demo/infinite-load.ts

@@ -1,8 +1,8 @@
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 import { HttpClient } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
+import { catchError, takeUntil } from 'rxjs/operators';
 
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -129,6 +129,7 @@ class MyDataSource extends DataSource<ItemData> {
       .get<{ results: ItemData[] }>(
         `https://randomuser.me/api/?results=${this.pageSize}&inc=name,gender,email,nat&noinfo`
       )
+      .pipe(catchError(() => of({ results: [] })))
       .subscribe(res => {
         this.cachedData.splice(page * this.pageSize, this.pageSize, ...res.results);
         this.dataStream.next(this.cachedData);

components/list/demo/loadmore.ts

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -71,17 +73,23 @@ export class NzDemoListLoadmoreComponent implements OnInit {
   }
 
   getData(callback: (res: any) => void): void {
-    this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
+    this.http
+      .get(fakeDataUrl)
+      .pipe(catchError(() => of({ results: [] })))
+      .subscribe((res: any) => callback(res));
   }
 
   onLoadMore(): void {
     this.loadingMore = true;
     this.list = this.data.concat([...Array(count)].fill({}).map(() => ({ loading: true, name: {} })));
-    this.http.get(fakeDataUrl).subscribe((res: any) => {
-      this.data = this.data.concat(res.results);
-      this.list = [...this.data];
-      this.loadingMore = false;
-    });
+    this.http
+      .get(fakeDataUrl)
+      .pipe(catchError(() => of({ results: [] })))
+      .subscribe((res: any) => {
+        this.data = this.data.concat(res.results);
+        this.list = [...this.data];
+        this.loadingMore = false;
+      });
   }
 
   edit(item: any): void {

components/page-header/demo/responsive.ts

@@ -45,11 +45,13 @@ import { Component } from '@angular/core';
       .content {
         display: flex;
       }
+
       .extra > div {
         display: flex;
         width: max-content;
         justify-content: flex-end;
       }
+
       @media (max-width: 576px) {
         .content {
           display: block;

components/select/demo/scroll-load.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-demo-select-scroll-load',
@@ -35,7 +35,10 @@ export class NzDemoSelectScrollLoadComponent implements OnInit {
   /* eslint-disable @typescript-eslint/no-explicit-any */
   getRandomNameList: Observable<string[]> = this.http
     .get(`${this.randomUserUrl}`)
-    .pipe(map((res: any) => res.results))
+    .pipe(
+      catchError(() => of({ results: [] })),
+      map((res: any) => res.results)
+    )
     .pipe(map((list: any) => list.map((item: any) => `${item.name.first}`)));
 
   loadMore(): void {

components/select/demo/select-users.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { debounceTime, map, switchMap } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { catchError, debounceTime, map, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-demo-select-select-users',
@@ -55,7 +55,10 @@ export class NzDemoSelectSelectUsersComponent implements OnInit {
     const getRandomNameList = (name: string) =>
       this.http
         .get(`${this.randomUserUrl}`)
-        .pipe(map((res: any) => res.results))
+        .pipe(
+          catchError(() => of({ results: [] })),
+          map((res: any) => res.results)
+        )
         .pipe(map((list: any) => list.map((item: any) => `${item.name.first} ${name}`)));
     const optionList$: Observable<string[]> = this.searchChange$
       .asObservable()

components/steps/demo/progress.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 import { merge, Observable, timer } from 'rxjs';
 import { delay, finalize, map, scan } from 'rxjs/operators';
 
@@ -63,7 +63,7 @@ function mockAsyncStep(): Observable<number> {
     `
   ]
 })
-export class NzDemoStepsProgressComponent implements OnDestroy {
+export class NzDemoStepsProgressComponent {
   steps: Step[] = [
     {
       id: 1,
@@ -87,7 +87,6 @@ export class NzDemoStepsProgressComponent implements OnDestroy {
       percentage: 0
     }
   ];
-  intervalId = -1;
   current = 0;
   processing = false;
 
@@ -129,8 +128,4 @@ export class NzDemoStepsProgressComponent implements OnDestroy {
       }
     }
   }
-
-  ngOnDestroy(): void {
-    clearInterval(this.intervalId);
-  }
 }

components/table/demo/ajax.ts

@@ -1,6 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Component, Injectable, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { NzTableQueryParams } from 'ng-zorro-antd/table';
 
@@ -35,7 +36,9 @@ export class RandomUserService {
         params = params.append(filter.key, value);
       });
     });
-    return this.http.get<{ results: RandomUser[] }>(`${this.randomUserUrl}`, { params });
+    return this.http
+      .get<{ results: RandomUser[] }>(`${this.randomUserUrl}`, { params })
+      .pipe(catchError(() => of({ results: [] })));
   }
 
   constructor(private http: HttpClient) {}

package.json

@@ -24,40 +24,40 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@angular/cdk": "^12.0.3",
+    "@angular/cdk": "^12.1.0",
     "@ant-design/icons-angular": "^11.0.1",
     "date-fns": "^2.16.1",
     "ngx-hover-preload": "0.0.3",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.3",
-    "@angular-devkit/core": "^12.0.3",
-    "@angular-devkit/schematics": "^12.0.3",
+    "@angular-devkit/build-angular": "^12.1.0",
+    "@angular-devkit/core": "^12.1.0",
+    "@angular-devkit/schematics": "^12.1.0",
     "@angular-eslint/builder": "~12.1.0",
     "@angular-eslint/eslint-plugin": "~12.1.0",
     "@angular-eslint/eslint-plugin-template": "~12.1.0",
     "@angular-eslint/schematics": "~12.1.0",
     "@angular-eslint/template-parser": "~12.1.0",
-    "@angular/animations": "^12.0.3",
-    "@angular/cli": "~12.0.3",
-    "@angular/common": "^12.0.3",
-    "@angular/compiler": "^12.0.3",
-    "@angular/compiler-cli": "~12.0.3",
-    "@angular/core": "^12.0.3",
-    "@angular/forms": "^12.0.3",
-    "@angular/language-service": "^12.0.3",
-    "@angular/platform-browser": "^12.0.3",
-    "@angular/platform-browser-dynamic": "^12.0.3",
-    "@angular/platform-server": "^12.0.3",
-    "@angular/router": "^12.0.3",
-    "@angular/service-worker": "^12.0.3",
+    "@angular/animations": "^12.1.0",
+    "@angular/cli": "^12.1.0",
+    "@angular/common": "^12.1.0",
+    "@angular/compiler": "^12.1.0",
+    "@angular/compiler-cli": "^12.1.0",
+    "@angular/core": "^12.1.0",
+    "@angular/forms": "^12.1.0",
+    "@angular/language-service": "^12.1.0",
+    "@angular/platform-browser": "^12.1.0",
+    "@angular/platform-browser-dynamic": "^12.1.0",
+    "@angular/platform-server": "^12.1.0",
+    "@angular/router": "^12.1.0",
+    "@angular/service-worker": "^12.1.0",
     "@ant-design/dark-theme": "^2.0.2",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-angular": "^12.1.4",
-    "@nguniversal/builders": "^12.0.1",
-    "@nguniversal/express-engine": "^12.0.1",
-    "@schematics/angular": "^12.0.3",
+    "@nguniversal/builders": "^12.1.0",
+    "@nguniversal/express-engine": "^12.1.0",
+    "@schematics/angular": "^12.1.0",
     "@stackblitz/sdk": "^1.5.2",
     "@types/d3": "^6.2.0",
     "@types/fs-extra": "^9.0.5",
@@ -116,7 +116,7 @@
     "marked": "^2.0.0",
     "minimist": "^1.2.5",
     "monaco-editor": "^0.21.2",
-    "ng-packagr": "^12.0.3",
+    "ng-packagr": "^12.1.0",
     "ngx-color": "^6.2.0",
     "node-prismjs": "^0.1.2",
     "parse5": "^6.0.1",

scripts/gulp/tasks/site.ts

@@ -79,7 +79,13 @@ task(
 /** Run `ng build --prod --base-href ./ --project=ng-zorro-antd-iframe` */
 task(
   'build:site-iframe',
-  execNodeTask('@angular/cli', 'ng', ['build', '--project=ng-zorro-antd-iframe', '--prod', '--base-href=./'])
+  execNodeTask('@angular/cli', 'ng', [
+    'build',
+    '--project=ng-zorro-antd-iframe',
+    '--configuration',
+    'production',
+    '--base-href=./'
+  ])
 );
 
 /** Replace the library paths to publish/ directory */

scripts/prerender/ngsw-config.ts

@@ -14,6 +14,8 @@ import { minifyFile } from './minify';
 
 type Local = 'en' | 'zh';
 
+const browserOutput = `${buildConfig.outputDir}/browser`;
+
 const distFiles: {
   [key: string]: string[];
 } = {
@@ -25,17 +27,17 @@ const distFiles: {
 async function minifyFiles(): Promise<void> {
   for (const type of Object.keys(distFiles)) {
     const paths: string[] = distFiles[type]
-      .map(pattern => glob(pattern, { cwd: buildConfig.outputDir }))
+      .map(pattern => glob(pattern, { cwd: browserOutput }))
       .reduce((a, b) => [...a, ...b], []);
     for (const contentPath of paths) {
-      await minifyFile(resolve(buildConfig.outputDir, contentPath), type);
+      await minifyFile(resolve(browserOutput, contentPath), type);
     }
   }
 }
 
 async function runNGSWConfig(): Promise<void> {
   return new Promise((res, reject) => {
-    const childProcess = child_process.spawn('node_modules/.bin/ngsw-config', ['dist', 'ngsw-config.json'], {
+    const childProcess = child_process.spawn('node_modules/.bin/ngsw-config', [browserOutput, 'ngsw-config.json'], {
       env: { ...process.env },
       cwd: buildConfig.projectDir,
       stdio: ['pipe', 'ignore', 'ignore']
@@ -47,14 +49,14 @@ async function runNGSWConfig(): Promise<void> {
 }
 
 async function setLocalizedIndex(local: Local): Promise<void> {
-  const content = await readFile(resolve(buildConfig.outputDir, 'docs/introduce', local, 'index.html'));
-  await writeFile(resolve(buildConfig.outputDir, 'index.html'), content);
+  const content = await readFile(resolve(browserOutput, 'docs/introduce', local, 'index.html'));
+  await writeFile(resolve(browserOutput, 'index.html'), content);
 }
 
 async function saveAsNGSWConfig(local: Local): Promise<void> {
-  const config = await readJSON(resolve(buildConfig.outputDir, 'ngsw.json'));
+  const config = await readJSON(resolve(browserOutput, 'ngsw.json'));
   config.local = local;
-  await writeJSON(resolve(buildConfig.outputDir, `ngsw.${local}.json`), config);
+  await writeJSON(resolve(browserOutput, `ngsw.${local}.json`), config);
 }
 
 async function rewriteConfig(local: Local): Promise<void> {

scripts/prerender/route-paths.txt

@@ -133,8 +133,6 @@ components/overview/en
 /experimental/resizable/en
 /experimental/code-editor/zh
 /experimental/code-editor/en
-/experimental/graph/zh
-/experimental/graph/en
 /docs/animations/en
 /docs/animations/zh
 /docs/changelog/en
@@ -162,9 +160,9 @@ components/overview/en
 /docs/migration-v10/en
 /docs/migration-v10/zh
 /experimental/resizable/zh
+/experimental/resizable/en
 /experimental/pipes/en
 /experimental/pipes/zh
-/experimental/resizable/en
 /experimental/code-editor/zh
 /experimental/code-editor/en
 /experimental/experimental-image/zh

scripts/prerender/sitemap.ts

@@ -57,5 +57,5 @@ export function generateSitemap(): void {
       ...generateUrls('zh')
     ]
   });
-  writeFileSync(resolve(buildConfig.outputDir, 'sitemap.xml'), sitemapInstance.toString(true));
+  writeFileSync(resolve(`${buildConfig.outputDir}/browser`, 'sitemap.xml'), sitemapInstance.toString(true));
 }

scripts/release-helper.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 rm -rf archive-docs
 git clone https://github.com/NG-ZORRO/archive-docs.git
-cp -r archive-docs/issue-helper dist/issue-helper
-cp -r archive-docs/version dist/version
+cp -r archive-docs/issue-helper dist/browser/issue-helper
+cp -r archive-docs/version dist/browser/version
 rm -rf archive-docs