upgraded to latest version of angular and material (17.2)

.github/workflows/main.yml

@@ -20,7 +20,7 @@ jobs:
     steps:
 
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Prepare
       id: prep
@@ -50,17 +50,17 @@ jobs:
         echo ::set-output name=created::$(date -u +'%Y-%m-%dT%H:%M:%SZ')
 
     - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v1
+      uses: docker/setup-buildx-action@v3
 
     - name: Login to DockerHub
       if: github.event_name != 'pull_request'
-      uses: docker/login-action@v1 
+      uses: docker/login-action@v3
       with:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_PASSWORD }}
 
     - name: Build and push
-      uses: docker/build-push-action@v2
+      uses: docker/build-push-action@v5
       with:
         context: .
         file: ./Dockerfile

.prettierrc

@@ -1,2 +1,6 @@
 tabWidth: 2
 singleQuote: true
+overrides:
+  - files: '*.html'
+    options:
+      parser: 'angular'

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 --aot --configuration production 
+RUN npx ng build
 
 ### Stage 2: Setup ###
 
@@ -25,7 +24,7 @@ RUN rm -rf /usr/share/nginx/html/*
 COPY default.conf /etc/nginx/conf.d/default.conf
 COPY scripts/nginx-basehref.sh /docker-entrypoint.d/90-basehref.sh
 COPY scripts/settings-from-env.sh /docker-entrypoint.d/91-settings-from-env.sh
-COPY --from=builder /ng-app/dist /usr/share/nginx/html
+COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 RUN chown -R nginx:nginx /usr/share/nginx/html && chmod +x /docker-entrypoint.d/90-basehref.sh && chmod +x /docker-entrypoint.d/91-settings-from-env.sh
 USER nginx
 

angular.json

@@ -3,20 +3,21 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "player.vm.console.ui": {
+    "player-vm-console-ui": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "preserveSymlinks": true,
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "assets": [
               "src/assets",
               {
@@ -25,74 +26,90 @@
                 "output": "/"
               }
             ],
-            "styles": ["src/styles/styles.scss"],
+            "styles": [
+              "src/styles/styles.scss",
+              "./node_modules/bootstrap/scss/bootstrap-utilities.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/styles",
+                "./node_modules/bootstrap/scss/bootstrap-utilities.scss"
+              ]
+            },
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/jquery-ui-dist/jquery-ui.js",
               "src/assets/vmware-wmks/js/wmks.min.js"
             ],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
+                },
                 {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
-              ]
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "player.vm.console.ui:build",
             "port": 4305
           },
           "configurations": {
             "production": {
-              "browserTarget": "player.vm.console.ui:build:production"
+              "buildTarget": "player-vm-console-ui:build:production"
+            },
+            "development": {
+              "buildTarget": "player-vm-console-ui:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "player.vm.console.ui:build"
+            "buildTarget": "player-vm-console-ui:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/jquery-ui-dist/jquery-ui.js",
               "src/assets/vmware-wmks/js/wmks.min.js"
             ],
-            "styles": ["src/styles.css"],
+            "styles": [
+              "src/styles.css",
+              "./node_modules/bootstrap/scss/bootstrap-utilities.scss"
+            ],
             "assets": ["src/assets", "src/favicon.ico"]
           }
         }
       }
     },
-    "player.vm.console.ui-e2e": {
+    "player-vm-console-ui-e2e": {
       "root": "",
       "sourceRoot": "e2e",
       "projectType": "application",
@@ -101,7 +118,7 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "player.vm.console.ui:serve"
+            "devServerTarget": "player-vm-console-ui:serve"
           }
         }
       }