Version updates to Ng 21 plus dependencies (#661)

* mods to get player.ui compiling and running

* updates to ng 21

* fixes npm install version dependency errors

* updates all to latest

* updates dockerfile to newer version of node

* updates dockerfile to newer version of node

* updates dockerfile to newer version of node

* Fixes nav user menu at top right display issues

* Fixes username color in top right nav

* Fixes the export modal content alignment

* Fixes main page table width

* Fixes my views being in a different serif font. Just set a default for the app entirely.

* Fixes material table backgounds for light and dark mode

* Fixes team name width and copy Id button alignment

* Fixes checkboxes that were partially hidden in template list

* fixed admin nav list justification

* fix admin views icon clipping

* update packages

* update packages

* fixed player icon in mini mode

* css fixes

* remove unneeded css

* fixed subscription names not being visible

* fix admin user role select

* fixed admin app template expansion panel spacing

* fix my views search box

* fix admin search boxes

* fix more search fields

* fix user role dropdown

* dont reset search when add/remove user from team

* fix add/remove users table

* remove topbar color references

* fix text color

* favicon fix

* app-bar mini mode fix

* color adjustments

* default color

* reset to 4c7aa2

* ui fixes

* monochrome theme colors

* settings back to AppTopBarHex*

---------

Co-authored-by: Andrew Schlackman <72105194+sei-aschlackman@users.noreply.github.com>
Co-authored-by: sei-tspencer <trspencer@sei.cmu.edu>

Author: 3 people

Dockerfile

@@ -1,20 +1,19 @@
-FROM node:16-alpine as builder
+FROM node:20-alpine AS builder
 
 COPY package.json package-lock.json ./
 
 # Storing node modules on a separate layer will prevent unnecessary npm install at each build
 RUN npm set progress=false && \
   npm config set depth 0 && \
-  npm cache clean --force && \
-  npm config set unsafe-perm true
+  npm cache clean --force
 
 RUN npm ci && mkdir -p /ng-app/dist && cp -R ./node_modules ./ng-app
 
 WORKDIR /ng-app
 
 COPY . .
 
-RUN $(npm bin)/ng build --resources-output-path=assets/fonts --configuration production
+RUN npx ng build --resources-output-path=assets/fonts --configuration production
 
 ### Stage 2: Setup ###
 

angular.json

@@ -16,6 +16,12 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
+            "allowedCommonJsDependencies": [
+              "crypto-js/core.js",
+              "crypto-js/enc-base64.js",
+              "crypto-js/enc-utf8.js",
+              "crypto-js/sha256.js"
+            ],
             "assets": [
               "src/assets",
               {
@@ -26,12 +32,11 @@
             ],
             "styles": [
               "src/styles/styles.scss",
-              "./node_modules/bootstrap/scss/bootstrap-utilities.scss"
+              "./node_modules/bootstrap/dist/css/bootstrap-utilities.min.css"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "src/styles",
-                "./node_modules/bootstrap/scss/bootstrap-utilities.scss"
+                "src/styles"
               ]
             },
             "scripts": []
@@ -78,18 +83,18 @@
           },
           "configurations": {
             "production": {
-              "browserTarget": "player-ui:build:production"
+              "buildTarget": "player-ui:build:production"
             },
             "development": {
-              "browserTarget": "player-ui:build:development"
+              "buildTarget": "player-ui:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "player-ui:build"
+            "buildTarget": "player-ui:build"
           }
         },
         "test": {
@@ -133,10 +138,30 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "style": "scss"
+      "style": "scss",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "app",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
   "cli": {