[feature] upgrade webapp angular deps version #1707 (#1987)

Signed-off-by: aias00 <[email protected]>
Co-authored-by: limbo <[email protected]>

web-app/angular.json

@@ -99,22 +99,23 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "hertzbeat-web-app:build"
+            "proxyConfig": "proxy.conf.json",
+            "buildTarget": "hertzbeat-web-app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "hertzbeat-web-app:build:production"
+              "buildTarget": "hertzbeat-web-app:build:production"
             },
             "development": {
-              "browserTarget": "hertzbeat-web-app:build:development"
+              "buildTarget": "hertzbeat-web-app:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "hertzbeat-web-app:build"
+            "buildTarget": "hertzbeat-web-app:build"
           }
         },
         "test": {

web-app/package.json

@@ -20,7 +20,7 @@
   ],
   "scripts": {
     "ng": "ng",
-    "start": "ng s -o",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "npm run ng-high-memory build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
@@ -40,54 +40,54 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.2.10",
-    "@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/form": "15.2.1",
-    "@delon/mock": "15.2.1",
-    "@delon/theme": "15.2.1",
-    "@delon/util": "15.2.1",
+    "@angular/animations": "17.3.10",
+    "@angular/common": "17.3.10",
+    "@angular/compiler": "17.3.10",
+    "@angular/core": "17.3.10",
+    "@angular/forms": "17.3.10",
+    "@angular/platform-browser": "17.3.10",
+    "@angular/platform-browser-dynamic": "17.3.10",
+    "@angular/router": "17.3.10",
+    "@delon/abc": "17.0.5",
+    "@delon/acl": "17.3.1",
+    "@delon/auth": "17.3.1",
+    "@delon/cache": "17.3.1",
+    "@delon/form": "17.3.1",
+    "@delon/mock": "17.3.1",
+    "@delon/theme": "17.3.1",
+    "@delon/util": "17.3.1",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
-    "angular-tag-cloud-module": "15.0.0",
+    "angular-tag-cloud-module": "17.0.1",
     "echarts": "5.4.3",
     "jquery": "3.7.1",
     "monaco-editor": "0.36.1",
-    "ng-zorro-antd": "15.1.0",
-    "ngx-color-picker": "12.0.1",
-    "ngx-echarts": "15.0.3",
-    "ngx-slick-carousel": "15.0.0",
+    "ng-zorro-antd": "17.4.1",
+    "ngx-color-picker": "16.0.0",
+    "ngx-echarts": "17.2.0",
+    "ngx-slick-carousel": "17.0.0",
     "rxjs": "7.8.1",
     "screenfull": "6.0.2",
     "slick-carousel": "1.8.1",
     "tslib": "2.6.2",
-    "zone.js": "0.11.8"
+    "zone.js": "0.14.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.2.10",
-    "@angular-eslint/builder": "15.2.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
-    "@angular-eslint/schematics": "15.2.1",
-    "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "15.2.10",
-    "@angular/compiler-cli": "15.2.10",
-    "@angular/language-service": "15.2.10",
-    "@delon/testing": "15.2.1",
-    "@types/jasmine": "4.0.3",
-    "@types/jasminewd2": "2.0.12",
-    "@types/node": "12.20.55",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
-    "@typescript-eslint/parser": "5.49.0",
+    "@angular-devkit/build-angular": "17.3.8",
+    "@angular-eslint/builder": "17.5.2",
+    "@angular-eslint/eslint-plugin": "17.5.2",
+    "@angular-eslint/eslint-plugin-template": "17.5.2",
+    "@angular-eslint/schematics": "17.5.2",
+    "@angular-eslint/template-parser": "17.5.2",
+    "@angular/cli": "17.3.8",
+    "@angular/compiler-cli": "17.3.10",
+    "@angular/language-service": "17.3.10",
+    "@delon/testing": "17.3.1",
+    "@types/jasmine": "5.1.4",
+    "@types/jasminewd2": "2.0.13",
+    "@types/node": "20.12.11",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
     "eslint": "8.51.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-deprecation": "1.3.3",
@@ -104,7 +104,7 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "13.3.0",
-    "ng-alain": "15.2.1",
+    "ng-alain": "17.3.1",
     "node-fetch": "2.7.0",
     "prettier": "2.8.8",
     "protractor": "7.0.0",
@@ -116,7 +116,7 @@
     "stylelint-declaration-block-no-ignored-properties": "2.7.0",
     "stylelint-order": "5.0.0",
     "ts-node": "10.9.1",
-    "typescript": "4.9.5"
+    "typescript": "5.3.3"
   },
   "lint-staged": {
     "(src)/**/*.{html,ts}": [

web-app/proxy.conf.json

@@ -0,0 +1,8 @@
+{
+  "/api/*": {
+    "target": "http://localhost:1157",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}

web-app/src/app/global-config.module.ts

@@ -8,7 +8,7 @@ import { throwIfAlreadyLoaded } from '@core';
 
 import { environment } from '@env/environment';
 
-const alainModules: any[] = [AlainThemeModule.forRoot(), DelonACLModule.forRoot()];
+const alainModules: any[] = [AlainThemeModule.forRoot(), DelonACLModule];
 import { NzConfig, NZ_CONFIG } from 'ng-zorro-antd/core/config';
 
 const ngZorroConfig: NzConfig = {};

web-app/src/environments/environment.ts

@@ -8,7 +8,7 @@ export const environment = {
   production: false,
   useHash: false,
   api: {
-    baseUrl: 'http://localhost:1157/api/',
+    baseUrl: 'api/',
     refreshTokenEnabled: true
   }
 } as Environment;

web-app/src/main.ts

@@ -1,12 +1,27 @@
-import { enableProdMode, ViewEncapsulation } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { enableProdMode, EnvironmentInjector, ViewEncapsulation, Injector, PLATFORM_ID, runInInjectionContext } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { preloaderFinished } from '@delon/theme';
+import { stepPreloader } from '@delon/theme';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
-preloaderFinished();
+const injector = Injector.create({
+  providers: [
+    { provide: PLATFORM_ID, useValue: 'browser' },
+    {
+      provide: DOCUMENT,
+      useFactory: () => {
+        return document;
+      }
+    }
+  ]
+}) as EnvironmentInjector;
+
+let preloaderDone!: () => void;
+runInInjectionContext(injector, () => (preloaderDone = stepPreloader()));
+preloaderDone();
 
 if (environment.production) {
   enableProdMode();

web-app/src/styles/theme.less

@@ -3,7 +3,7 @@
 // - `dark` Import the official dark less style file
 // - `compact` Import the official compact less style file
 @import '@delon/theme/theme-default.less';
-@import "node_modules/ng-zorro-antd/code-editor/style/entry.less";
+@import "ng-zorro-antd/code-editor/style/entry.less";
 
 // ==========The following is the custom theme variable area==========
 // The theme parameters can be generated at https://ng-alain.github.io/ng-alain/