Upgrade Angular and Its Dependencies

.browserslistrc

@@ -10,3 +10,9 @@ last 2 versions
 Firefox ESR
 not dead
 not IE 9-11 # For IE 9-11 support, remove 'not'.
+
+# don't support these browsers because they don't support ES6
+# these are both mobile browsers with small market share
+not kaios 3.0-3.1
+not kaios 2.5
+not op_mini all

.eslintrc.json

@@ -1,21 +1,27 @@
 {
-  "ignorePatterns": ["projects/**/*"],
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
   "overrides": [
     {
       "extends": [
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates",
         "plugin:import/errors",
         "plugin:import/warnings",
         "plugin:import/typescript"
       ],
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
         "createDefaultProgram": true,
-        "project": ["tsconfig.json", "tsconfig.e2e.json"]
+        "project": [
+          "tsconfig.json",
+          "tsconfig.e2e.json"
+        ]
       },
       "plugins": [
         "eslint-plugin-rxjs",
@@ -24,21 +30,41 @@
         "import"
       ],
       "rules": {
-        "no-console": ["error", { "allow": ["warn", "error"] }],
+        // TODO: we should consider enabling these rules in the future as part of https://github.com/QutEcoacoustics/workbench-client/issues/2066
+        // they are disabled right now because we used to use the ng-cli-compat config which had these rules disabled
+        // since upgrading to the recommended angular eslint config, we have not had time to fix all the lint errors
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/prefer-as-const": "off",
+        // beginning of explicitly enabled rules
+        "no-console": [
+          "error",
+          {
+            "allow": [
+              "warn",
+              "error"
+            ]
+          }
+        ],
         "import/no-unresolved": "off",
         "import/no-deprecated": "error",
         "@angular-eslint/component-selector": [
           "error",
           {
-            "prefix": ["baw"],
+            "prefix": [
+              "baw"
+            ],
             "style": "kebab-case",
             "type": "element"
           }
         ],
         "@angular-eslint/directive-selector": [
           "error",
           {
-            "prefix": ["baw"],
+            "prefix": [
+              "baw"
+            ],
             "style": "camelCase",
             "type": "attribute"
           }
@@ -68,7 +94,9 @@
           }
         ],
         "@typescript-eslint/member-ordering": "off",
-        "@typescript-eslint/no-shadow": ["error"],
+        "@typescript-eslint/no-shadow": [
+          "error"
+        ],
         "@typescript-eslint/no-unused-vars": [
           "error",
           {
@@ -83,10 +111,21 @@
             "avoidEscape": true
           }
         ],
-        "@typescript-eslint/semi": ["off", null],
-        "arrow-parens": ["off", "always"],
-        "brace-style": ["off"],
-        "eqeqeq": ["error", "always"],
+        "@typescript-eslint/semi": [
+          "off",
+          null
+        ],
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "brace-style": [
+          "off"
+        ],
+        "eqeqeq": [
+          "error",
+          "always"
+        ],
         "guard-for-in": "off",
         "import/order": "error",
         "no-implicit-globals": "error",
@@ -115,8 +154,12 @@
       }
     },
     {
-      "extends": ["plugin:@angular-eslint/template/recommended"],
-      "files": ["*.html"],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "files": [
+        "*.html"
+      ],
       "rules": {}
     }
   ],

Dockerfile

@@ -30,7 +30,7 @@ RUN npm run build:ssr
 
 
 
-FROM node:14-alpine
+FROM node:18-alpine
 
 ARG GIT_COMMIT
 ARG WORKBENCH_CLIENT_VERSION

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:browser-esbuild",
           "defaultConfiguration": "development",
           "options": {
             "outputPath": "dist/workbench-client/browser",
@@ -24,10 +24,19 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
-            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.json"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "stylePreprocessorOptions": {
-              "includePaths": ["src/app/styles"]
+              "includePaths": [
+                "src/app/styles",
+                "node_modules"
+              ]
             },
             "scripts": [],
             "sourceMap": true,
@@ -48,9 +57,7 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
               "buildOptimizer": true,
               "budgets": [
                 {
@@ -68,9 +75,7 @@
               "optimization": false,
               "outputHashing": "all",
               "sourceMap": true,
-              "namedChunks": true,
               "extractLicenses": true,
-              "vendorChunk": true,
               "buildOptimizer": false
             }
           }
@@ -94,18 +99,29 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/assets", "src/manifest.json"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/assets",
+              "src/manifest.json"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "stylePreprocessorOptions": {
-              "includePaths": ["src/app/styles"]
+              "includePaths": [
+                "src/app/styles",
+                "node_modules"
+              ]
             },
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         },
         "e2e": {
@@ -127,10 +143,14 @@
             "main": "server.ts",
             "tsConfig": "tsconfig.server.json",
             "stylePreprocessorOptions": {
-              "includePaths": ["src/app/styles"]
+              "includePaths": [
+                "src/app/styles",
+                "node_modules"
+              ]
             },
             "sourceMap": true,
-            "optimization": false
+            "optimization": false,
+            "buildOptimizer": false
           },
           "configurations": {
             "production": {
@@ -142,7 +162,8 @@
                 }
               ],
               "sourceMap": false,
-              "optimization": true
+              "optimization": true,
+              "buildOptimizer": true
             }
           },
           "defaultConfiguration": ""
@@ -159,7 +180,9 @@
           "options": {
             "browserTarget": "workbench-client:build:production",
             "serverTarget": "workbench-client:server:production",
-            "routes": ["/"]
+            "routes": [
+              "/"
+            ]
           },
           "configurations": {
             "production": {}
@@ -168,8 +191,15 @@
       }
     }
   },
-  "defaultProject": "workbench-client",
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }