Merge pull request DSpace#2000 from tdonohue/update_latest_angular13

Update to latest Angular 13 & Remove unused dependencies

Author: tdonohue

angular.json

@@ -25,12 +25,10 @@
               }
             },
             "allowedCommonJsDependencies": [
-              "angular2-text-mask",
               "cerialize",
               "core-js",
               "lodash",
               "jwt-decode",
-              "url-parse",
               "uuid",
               "webfontloader",
               "zone.js"

package.json

@@ -54,18 +54,18 @@
     "ts-node": "10.2.1"
   },
   "dependencies": {
-    "@angular/animations": "~13.2.6",
+    "@angular/animations": "~13.3.12",
     "@angular/cdk": "^13.2.6",
-    "@angular/common": "~13.2.6",
-    "@angular/compiler": "~13.2.6",
-    "@angular/core": "~13.2.6",
-    "@angular/forms": "~13.2.6",
-    "@angular/localize": "13.2.6",
-    "@angular/platform-browser": "~13.2.6",
-    "@angular/platform-browser-dynamic": "~13.2.6",
-    "@angular/platform-server": "~13.2.6",
-    "@angular/router": "~13.2.6",
-    "@babel/runtime": "^7.17.2",
+    "@angular/common": "~13.3.12",
+    "@angular/compiler": "~13.3.12",
+    "@angular/core": "~13.3.12",
+    "@angular/forms": "~13.3.12",
+    "@angular/localize": "13.3.12",
+    "@angular/platform-browser": "~13.3.12",
+    "@angular/platform-browser-dynamic": "~13.3.12",
+    "@angular/platform-server": "~13.3.12",
+    "@angular/router": "~13.3.12",
+    "@babel/runtime": "7.17.2",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
@@ -77,15 +77,15 @@
     "@ngrx/store": "^13.0.2",
     "@nguniversal/express-engine": "^13.0.2",
     "@ngx-translate/core": "^13.0.0",
-    "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
+    "@nicky-lenaers/ngx-scroll-to": "^13.0.0",
     "@types/grecaptcha": "^3.0.4",
     "angular-idle-preload": "3.0.0",
     "angulartics2": "^12.0.0",
     "axios": "^0.27.2",
-    "bootstrap": "4.3.1",
-    "caniuse-lite": "^1.0.30001165",
+    "bootstrap": "^4.6.1",
     "cerialize": "0.1.18",
     "cli-progress": "^3.8.0",
+    "colors": "^1.4.0",
     "compression": "^1.7.4",
     "cookie-parser": "1.4.5",
     "core-js": "^3.7.0",
@@ -95,11 +95,8 @@
     "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",
     "fast-json-patch": "^3.0.0-1",
-    "file-saver": "^2.0.5",
     "filesize": "^6.1.0",
-    "font-awesome": "4.7.0",
     "http-proxy-middleware": "^1.0.5",
-    "https": "1.0.0",
     "js-cookie": "2.2.1",
     "js-yaml": "^4.1.0",
     "json5": "^2.1.3",
@@ -119,43 +116,38 @@
     "ngx-infinite-scroll": "^10.0.1",
     "ngx-pagination": "5.0.0",
     "ngx-sortablejs": "^11.1.0",
-    "ngx-ui-switch": "^11.0.1",
+    "ngx-ui-switch": "^13.0.2",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
-    "postcss-cli": "^9.1.0",
     "prop-types": "^15.7.2",
     "react-copy-to-clipboard": "^5.0.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.5.5",
     "sanitize-html": "^2.7.2",
     "sortablejs": "1.13.0",
-    "tslib": "^2.0.0",
-    "url-parse": "^1.5.6",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~13.1.0",
-    "@angular-devkit/build-angular": "~13.2.6",
+    "@angular-devkit/build-angular": "~13.3.10",
     "@angular-eslint/builder": "13.1.0",
     "@angular-eslint/eslint-plugin": "13.1.0",
     "@angular-eslint/eslint-plugin-template": "13.1.0",
     "@angular-eslint/schematics": "13.1.0",
     "@angular-eslint/template-parser": "13.1.0",
-    "@angular/cli": "~13.2.6",
-    "@angular/compiler-cli": "~13.2.6",
-    "@angular/language-service": "~13.2.6",
+    "@angular/cli": "~13.3.10",
+    "@angular/compiler-cli": "~13.3.12",
+    "@angular/language-service": "~13.3.12",
     "@cypress/schematic": "^1.5.0",
-    "@fortawesome/fontawesome-free": "^5.5.0",
+    "@fortawesome/fontawesome-free": "^6.2.1",
     "@ngrx/store-devtools": "^13.0.2",
     "@ngtools/webpack": "^13.2.6",
-    "@nguniversal/builders": "^13.0.2",
+    "@nguniversal/builders": "^13.1.1",
     "@types/deep-freeze": "0.1.2",
     "@types/express": "^4.17.9",
-    "@types/file-saver": "^2.0.1",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.8",
     "@types/js-cookie": "2.2.6",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.9",
@@ -166,53 +158,39 @@
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "cssnano": "^5.0.6",
     "cypress": "9.7.0",
     "cypress-axe": "^0.14.0",
-    "debug-loader": "^0.0.1",
     "deep-freeze": "0.0.1",
-    "dotenv": "^8.2.0",
     "eslint": "^8.2.0",
     "eslint-plugin-deprecation": "^1.3.2",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-jsdoc": "^39.6.4",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "express-static-gzip": "^2.1.5",
-    "fork-ts-checker-webpack-plugin": "^6.0.3",
-    "html-loader": "^1.3.2",
     "jasmine-core": "^3.8.0",
     "jasmine-marbles": "0.9.2",
-    "jasmine-spec-reporter": "~5.0.0",
     "karma": "^6.3.14",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
     "ngx-mask": "^13.1.7",
-    "nodemon": "^2.0.15",
+    "nodemon": "^2.0.20",
     "postcss": "^8.1",
     "postcss-apply": "0.12.0",
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.0.3",
     "postcss-preset-env": "^7.4.2",
     "postcss-responsive-type": "1.0.0",
-    "protractor": "^7.0.0",
-    "protractor-istanbul-plugin": "2.0.0",
-    "raw-loader": "0.5.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
     "rxjs-spy": "^8.0.2",
-    "sass": "~1.32.6",
+    "sass": "~1.33.0",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.1.1",
-    "string-replace-loader": "^3.1.0",
-    "terser-webpack-plugin": "^2.3.1",
-    "ts-loader": "^5.2.0",
     "ts-node": "^8.10.2",
     "typescript": "~4.5.5",
     "webpack": "^5.69.1",

src/app/statistics-page/statistics-table/statistics-table.component.html

@@ -10,7 +10,7 @@ <h3 class="m-1">
     <tbody>
 
     <tr>
-      <th scope="col"></th>
+      <td></td>
       <th scope="col"
           *ngFor="let header of headers"
           class="{{header}}-header">

src/app/thumbnail/thumbnail.component.scss

@@ -12,7 +12,7 @@ img {
     display: block;
     content: "";
     width: 100%;
-    padding-top: (297 / 210) * 100%;  // A4 ratio
+    padding-top: calc((297 / 210) * 100%);  // A4 ratio
   }
   > .inner {
     position: absolute;

src/styles/_functions.scss

@@ -1,12 +1,14 @@
+@use 'sass:math';
+
 @function calculateRem($size) {
-    $remSize: $size / 16px;
+    $remSize: math.div($size, 16px);
     @return $remSize;
 }
 
 
 @function strip-unit($number) {
     @if type-of($number) == 'number' and not unitless($number) {
-        @return $number / ($number * 0 + 1);
+        @return math.div($number , ($number * 0 + 1));
     }
     @return $number;
 }