Merge pull request #2054 from erjain/fix/dependabot-alerts

migrate WebSPA to angular@15.x and fix vulnerability

src/Web/WebSPA/Client/angular.json

@@ -23,7 +23,14 @@
             "styles": [
               "src/styles/globals.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "aot": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -48,7 +55,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -83,16 +91,6 @@
               "src/favicon.ico"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": []
-          }
         }
       }
     },
@@ -107,20 +105,10 @@
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "WebSPA:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
-          }
         }
       }
     }
   },
-  "defaultProject": "WebSPA",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

src/Web/WebSPA/Client/package.json

@@ -22,65 +22,65 @@
     "start": "ng serve",
     "build:dev": "ng build",
     "build:dev:watch": "npm run build:dev && ng build --watch",
-    "build:prod": "ng build --prod --aot --extract-css",
+    "build:prod": "ng build --configuration production --aot",
     "lint:sass": "sass-lint -c .sass-lint.yml Client/**/*.scss --verbose",
     "lint:ts": "tslint -c tslint.json Client/**/*.ts"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "^11.0.4",
+    "@angular-devkit/schematics": "^15.2.0",
-    "@angular/animations": "11.2.14",
+    "@angular/animations": "15.2.0",
-    "@angular/common": "11.2.14",
+    "@angular/common": "15.2.0",
-    "@angular/compiler": "11.2.14",
+    "@angular/compiler": "15.2.0",
-    "@angular/core": "11.2.14",
+    "@angular/core": "15.2.0",
-    "@angular/forms": "11.2.14",
+    "@angular/forms": "15.2.0",
-    "@angular/platform-browser": "11.2.14",
+    "@angular/platform-browser": "15.2.0",
-    "@angular/platform-browser-dynamic": "11.2.14",
+    "@angular/platform-browser-dynamic": "15.2.0",
-    "@angular/platform-server": "11.2.14",
+    "@angular/platform-server": "15.2.0",
-    "@angular/router": "11.2.14",
+    "@angular/router": "15.2.0",
     "@microsoft/signalr": "3.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
+    "@ng-bootstrap/ng-bootstrap": "14.0.1",
-    "@popperjs/core": "2.0.0",
+    "@popperjs/core": "2.11.6",
     "acorn": "^6.4.1",
     "acorn-dynamic-import": "4.0.0",
-    "bootstrap": "4.4.1",
+    "bootstrap": "5.2.3",
     "core-js": "^3.14.0",
-    "file-loader": "2.0.0",
+    "file-loader": "^6.2.0",
     "font-awesome": "4.7.0",
     "is-svg": ">=4.2.2",
     "isomorphic-fetch": "3.0.0",
     "jquery": "3.5.0",
-    "ngx-toastr": "^13.2.0",
+    "ngx-toastr": "15.2.2",
     "normalize.css": "8.0.0",
     "popper.js": "1.16.1",
     "rxjs": "^6.5.2",
     "rxjs-compat": "^6.5.2",
     "ssri": ">=8.0.1",
     "tslib": "^2.0.0",
-    "typedoc": "0.22.11",
+    "typedoc": "1.0.0-dev.4",
-    "webpack-dev-server": "4.7.4",
+    "webpack-dev-server": "^4.11.1",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.14",
+    "@angular-devkit/build-angular": "^15.2.0",
-    "@angular/cli": "11.2.14",
+    "@angular/cli": "15.2.0",
-    "@angular/compiler-cli": "11.2.14",
+    "@angular/compiler-cli": "15.2.0",
-    "@angular/language-service": "11.2.14",
+    "@angular/language-service": "15.2.0",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "@types/protractor": "4.0.0",
     "@types/selenium-webdriver": "3.0.10",
-    "codelyzer": "^6.0.0",
+    "codelyzer": "^6.0.2",
     "eslint": "8.10.0",
     "handlebars": "^4.7.7",
-    "jasmine-core": "~3.6.0",
+    "jasmine-core": "4.5.0",
-    "jasmine-spec-reporter": "~5.0.0",
+    "jasmine-spec-reporter": "7.0.0",
-    "karma": "~6.3.16",
+    "karma": "6.4.1",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "^3.1.1",
     "karma-cli": "^2.0.0",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine": "5.1.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
     "lodash": "^4.17.21",
     "merge": "2.1.1",
     "npm-watch": "0.5.0",
@@ -90,9 +90,9 @@
     "ts-helpers": "1.1.2",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
-    "typedoc": "0.22.11",
+    "typedoc": "1.0.0-dev.4",
-    "typescript": "4.0.8",
+    "typescript": "4.9.5",
-    "url-loader": "1.1.1",
+    "url-loader": "^4.1.1",
-    "webpack": "^4.42.1"
+    "webpack": "^5.75.0"
   }
-}
+}

src/Web/WebSPA/Client/src/modules/app.routes.ts

@@ -15,4 +15,4 @@ export const routes: Routes = [
     { path: 'order', component: OrdersNewComponent },
 ];
 
-export const routing = RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' });
+export const routing = RouterModule.forRoot(routes, {});

src/Web/WebSPA/Client/src/modules/orders/orders-new/orders-new.component.ts

@@ -7,7 +7,7 @@ import { BasketService } from '../../basket/basket.service';
 import { IOrder }                                   from '../../shared/models/order.model';
 import { BasketWrapperService }                     from '../../shared/services/basket.wrapper.service';
 
-import { FormGroup, FormBuilder, Validators  }      from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators  }      from '@angular/forms';
 import { Router }                                   from '@angular/router';
 
 @Component({
@@ -16,12 +16,12 @@ import { Router }                                   from '@angular/router';
     templateUrl: './orders-new.component.html'
 })
 export class OrdersNewComponent implements OnInit {
-    newOrderForm: FormGroup;  // new order form
+    newOrderForm: UntypedFormGroup;  // new order form
     isOrderProcessing: boolean;
     errorReceived: boolean;
     order: IOrder;
 
-    constructor(private orderService: OrdersService, private basketService: BasketService, fb: FormBuilder, private router: Router) {
+    constructor(private orderService: OrdersService, private basketService: BasketService, fb: UntypedFormBuilder, private router: Router) {
         // Obtain user profile information
         this.order = orderService.mapOrderAndIdentityInfoNewOrder();
         this.newOrderForm = fb.group({

src/Web/WebSPA/Client/src/polyfills.ts

@@ -33,27 +33,17 @@
 // import 'core-js/es6/map';
 // import 'core-js/es6/set';
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 
 /** Evergreen browsers require these. **/
 import 'core-js/es/reflect';
 import 'core-js/proposals/reflect-metadata';
 
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// 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.
 
 
 

src/Web/WebSPA/Client/src/styles/globals.scss

@@ -1,12 +1,13 @@
 /* You can add global styles to this file, and also import other style files */
 @import 'variables';
 @import './bootstrap-overrides';
-@import '~bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/bootstrap';
 @import 'button';
 @import 'form';
-@import '~ngx-toastr/toastr-bs4-alert.scss';
+/*@import 'ngx-toastr/toastr-bs4-alert.scss';*/
 @import 'toastr';
 @import 'utilities';
+@import 'node_modules/ngx-toastr/toastr';
 
 @font-face {
     font-family: 'Oswald';

src/Web/WebSPA/Client/src/test.ts

@@ -14,7 +14,6 @@ import {
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
-declare var require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
@@ -22,11 +21,9 @@ __karma__.loaded = function () {};
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
 // Finally, start Karma to run the tests.
 __karma__.start();

src/Web/WebSPA/Client/src/tsconfig.spec.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "target": "es5",
     "baseUrl": "",
     "types": [
       "jasmine",

src/Web/WebSPA/Client/tsconfig.json

@@ -6,9 +6,8 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2015",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
@@ -16,7 +15,8 @@
       "es2016",
       "dom"
     ],
-    "module": "esnext"
+    "module": "esnext",
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableIvy": false

src/Web/WebSPA/Dockerfile

@@ -1,6 +1,6 @@
 #See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
 
-ARG NODE_IMAGE=node:12.0
+ARG NODE_IMAGE=node:16-bullseye
 FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base
 WORKDIR /app
 EXPOSE 80
@@ -9,7 +9,7 @@ FROM ${NODE_IMAGE} as node-build
 WORKDIR /web/src
 COPY Web/WebSPA/Client/package.json .
 COPY Web/WebSPA/Client/package-lock.json .
-RUN npm install -g npm@6
+RUN npm install -g npm@9.5.1
 RUN npm install
 COPY Web/WebSPA/Client .
 RUN npm run build:prod

src/docker-compose.yml

@@ -135,7 +135,7 @@ services:
       context: .
       dockerfile: Web/WebSPA/Dockerfile
       args:
-        NODE_IMAGE: ${NODE_IMAGE:-node:12.0}
+        NODE_IMAGE: ${NODE_IMAGE:-node:16-bullseye}
     depends_on:
       - webshoppingagg
       - webshoppingapigw