upgrade to version angular 15 (#1291)

apache · Oct 21, 2023 · fdd0ad3 · fdd0ad3
1 parent 76965eb
commit fdd0ad3
Show file tree

Hide file tree

Showing 10 changed files with 5,075 additions and 5,825 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -38,10 +38,10 @@ Even small corrections to typos are very welcome :)
 
 - Front-web start   
 
-1. Need `nodejs npm angular-cli` environment
+1. Need `nodejs npm angular-cli` environment, Make sure `Node.js >= 16.10.0`
 2. Install yarn: `npm install -g yarn`   
 3. Execute under the front-end project directory web-app: `yarn install`
-4. Install angular-cli globally: `npm install -g @angular/cli@14 --registry=https://registry.npmmirror.com`
+4. Install angular-cli globally: `yarn global add @angular/cli@15`
 5. After the local backend is started, start the local frontend in the web-app directory: `ng serve --open`
 6. Browser access to localhost:4200 to start   
 
@@ -182,10 +182,10 @@ Public WeChat: `tancloudtech`
 
 - 前端启动
 
-1. 需要`nodejs npm angular-cli`环境
+1. 需要`nodejs npm angular-cli`环境, 确保你的版本 `Node.js >= 16.10.0`
 2. 安装yarn `npm install -g yarn`
 3. 在前端工程目录web-app下执行 `yarn install`
-4. 全局安装angular-cli `npm install -g @angular/cli@14 --registry=https://registry.npmmirror.com`
+4. 全局安装angular-cli `yarn global add @angular/cli@15`
 5. 待本地后端启动后，在web-app目录下启动本地前端 `ng serve --open`
 6. 浏览器访问 localhost:4200 即可开始，默认账号密码 admin/hertzbeat
 

diff --git a/web-app/.stylelintrc b/web-app/.stylelintrc
@@ -28,9 +28,10 @@
           "ng-deep"
         ]
       }
-    ]
+    ],
+    "import-notation": "string"
   },
   "ignoreFiles": [
     "src/assets/**/*"
   ]
-}
+}
diff --git a/web-app/README.md b/web-app/README.md
@@ -2,17 +2,17 @@
 
 ### Quickly Start   
 
-1. Need `Node Yarn` Environment.  
+1. Need `Node Yarn` Environment, Make sure `Node.js >= 16.10.0`
 2. Execute `yarn install` in `web-app`   
-3. Install angular-cli : `yarn global add @angular/cli@14`    
+3. Install angular-cli : `yarn global add @angular/cli@15`    
 4. Start After Backend Server Available : `ng serve --open`
 
 ---
 
-1. 需要nodejs npm环境，下载地址：https://nodejs.org/en/download
+1. 需要nodejs npm环境，下载地址：https://nodejs.org/en/download 确保你的版本 `Node.js >= 16.10.0`
 2. 安装yarn `npm install -g yarn`
 3. 在前端工程目录web-app下执行 `yarn install`
-4. 全局安装angular-cli `npm install -g @angular/cli@14 --registry=https://registry.npm.taobao.org`
+4. 全局安装angular-cli `yarn global add @angular/cli@15 --registry=https://registry.npm.taobao.org`
 5. 待本地后端启动后，在web-app目录下启动本地前端 `ng serve --open`
 
 ### Build HertzBeat Install Package    

diff --git a/web-app/angular.json b/web-app/angular.json
@@ -153,8 +153,17 @@
   "cli": {
     "packageManager": "yarn",
     "schematicCollections": [
-      "@schematics/angular", "hertzbeat-web-app"
+      "@schematics/angular",
+      "hertzbeat-web-app"
     ],
     "analytics": false
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }
diff --git a/web-app/package.json b/web-app/package.json
@@ -39,57 +39,57 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.0",
+    "@angular/animations": "^15.2.10",
     "@angular/cdk": "^14.2.0",
-    "@angular/common": "^14.2.0",
-    "@angular/compiler": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/forms": "^14.2.0",
-    "@angular/platform-browser": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
-    "@angular/router": "^14.2.0",
-    "@delon/abc": "^14.3.0",
-    "@delon/acl": "^14.3.0",
-    "@delon/auth": "^14.3.0",
-    "@delon/cache": "^14.3.0",
-    "@delon/chart": "^14.3.0",
-    "@delon/form": "^14.3.0",
-    "@delon/mock": "^14.3.0",
-    "@delon/theme": "^14.3.0",
-    "@delon/util": "^14.3.0",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "^15.2.10",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
+    "@delon/abc": "^15.2.1",
+    "@delon/acl": "^15.2.1",
+    "@delon/auth": "^15.2.1",
+    "@delon/cache": "^15.2.1",
+    "@delon/chart": "^15.2.1",
+    "@delon/form": "^15.2.1",
+    "@delon/mock": "^15.2.1",
+    "@delon/theme": "^15.2.1",
+    "@delon/util": "^15.2.1",
     "ajv": "^8.6.2",
     "ajv-formats": "^2.1.1",
     "echarts": "^5.2.2",
     "monaco-editor": "0.36.1",
-    "ng-zorro-antd": "^14.0.0",
-    "ngx-color-picker": "^12.0.1",
-    "ngx-echarts": "^v7.1.0",
-    "rxjs": "~7.5.0",
+    "ng-zorro-antd": "^15.1.0",
+    "ngx-color-picker": "~12.0.1",
+    "ngx-echarts": "~15.0.3",
+    "rxjs": "~7.8.0",
     "screenfull": "^6.0.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.1",
-    "@angular-eslint/builder": "~14.0.3",
-    "@angular-eslint/eslint-plugin": "~14.0.3",
-    "@angular-eslint/eslint-plugin-template": "~14.0.3",
-    "@angular-eslint/schematics": "~14.0.3",
-    "@angular-eslint/template-parser": "~14.0.3",
-    "@angular/cli": "~14.2.1",
-    "@angular/compiler-cli": "^14.2.0",
-    "@angular/language-service": "^14.2.0",
-    "@delon/testing": "^14.3.0",
+    "@angular-devkit/build-angular": "^15.2.10",
+    "@angular-eslint/builder": "~15.2.0",
+    "@angular-eslint/eslint-plugin": "~15.2.0",
+    "@angular-eslint/eslint-plugin-template": "~15.2.0",
+    "@angular-eslint/schematics": "~15.2.0",
+    "@angular-eslint/template-parser": "~15.2.0",
+    "@angular/cli": "~15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/language-service": "^15.1.0",
+    "@delon/testing": "^15.2.1",
     "@types/jasmine": "~4.0.0",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "~5.35.1",
-    "@typescript-eslint/parser": "~5.35.1",
-    "eslint": "^8.23.0",
-    "eslint-config-prettier": "~8.5.0",
-    "eslint-plugin-deprecation": "~1.3.2",
+    "@typescript-eslint/eslint-plugin": "~5.49.0",
+    "@typescript-eslint/parser": "~5.49.0",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "~8.6.0",
+    "eslint-plugin-deprecation": "~1.3.3",
     "eslint-plugin-import": "~2.26.0",
-    "eslint-plugin-jsdoc": "~39.3.6",
+    "eslint-plugin-jsdoc": "~39.7.4",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-prettier": "~4.2.1",
     "husky": "^7.0.4",
@@ -101,21 +101,19 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "lint-staged": "^13.0.3",
-    "ng-alain": "^14.3.0",
-    "ng-alain-plugin-theme": "^14.0.0",
-    "ng-alain-sts": "^0.0.2",
+    "ng-alain": "^15.2.1",
     "node-fetch": "^2.6.1",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.3",
     "protractor": "~7.0.0",
-    "source-map-explorer": "^2.5.2",
+    "source-map-explorer": "^2.5.3",
     "stylelint": "^14.10.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^28.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
     "stylelint-order": "^5.0.0",
     "ts-node": "~10.9.1",
-    "typescript": "~4.7.4"
+    "typescript": "~4.9.5"
   },
   "lint-staged": {
     "(src)/**/*.{html,ts}": [

diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts b/web-app/src/app/routes/dashboard/dashboard.component.ts
@@ -387,12 +387,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
   alertsEchartsInstance!: any;
   alertsLoading: boolean = true;
 
-  refreshAlerts(): void {
-    this.alertsEChartOption = this.alertsTheme;
-    this.cdr.detectChanges();
-    this.alertsLoading = false;
-  }
-
   // start 告警处理率
   alertsDealEChartOption!: EChartsOption;
   alertsDealTheme!: EChartsOption;
@@ -479,6 +473,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
           console.warn(message.msg);
         }
         alertSummaryInit$.unsubscribe();
+        this.alertsLoading = false;
+        this.alertsDealLoading = false;
       },
       error => {
         alertSummaryInit$.unsubscribe();

diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts
@@ -197,7 +197,7 @@ export class MonitorDataChartComponent implements OnInit {
     };
     if (this.unit != undefined || this.unit != null) {
       // @ts-ignore
-      this.lineHistoryTheme.title?.subtext = `${this.i18nSvc.fanyi('monitors.detail.chart.unit')}  ${this.unit}`;
+      this.lineHistoryTheme.title.subtext = `${this.i18nSvc.fanyi('monitors.detail.chart.unit')}  ${this.unit}`;
     }
     this.loadData();
   }

diff --git a/web-app/src/test.ts b/web-app/src/test.ts
@@ -8,15 +8,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/web-app/tsconfig.json b/web-app/tsconfig.json
@@ -13,7 +13,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2018",
@@ -29,7 +29,8 @@
       "@env/*": [
         "src/environments/*"
       ]
-    }
+    },
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,