Angular 20 upgrade (#121)

* npm update

* ngx bumps

* first

* 19

* 20

* more

* linting rules

* separate lint step

* eslint bump

* package lock sync

* remove airbnb garbage

* switch to eslint.config.mjs, fix linting errors

* using mjs don't need this

* set new output folder

Author: mlapaglia

.github/workflows/docker-publish.yml

@@ -58,6 +58,16 @@ jobs:
           recreate: true
           path: code-coverage-results.md
 
+  front-end-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Run frontend lint
+        working-directory: ./openalprwebhookprocessor.client
+        run: |
+          npm ci
+          npm run lint
+
   front-end-tests:
     runs-on: ubuntu-latest
     steps:
@@ -67,7 +77,6 @@ jobs:
         run: |
           npm ci
           npm run test:prod
-          npm run lint
 
       - name: Front End Code Coverage Report
         uses: irongut/CodeCoverageSummary@v1.3.0

openalprwebhookprocessor.client/.eslintrc.json

@@ -11,11 +11,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/openalprwebhookprocessor.client",
+            "outputPath": {
+              "base": "dist/openalprwebhookprocessor.client"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -52,8 +53,8 @@
               }
             ],
             "scripts": [],
-            "serviceWorker": true,
-            "ngswConfigPath": "ngsw-config.json"
+            "serviceWorker": "ngsw-config.json",
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -78,9 +79,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -89,7 +88,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "openalprwebhookprocessor.client:build:production"
@@ -104,13 +103,13 @@
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "openalprwebhookprocessor.client:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -146,5 +145,31 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "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": "."
+    }
   }
 }

openalprwebhookprocessor.client/angular.json

@@ -0,0 +1,71 @@
+import angularEslint from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularParser from '@angular-eslint/template-parser';
+import globals from "globals";
+import tsParser from '@typescript-eslint/parser';
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
+import stylistic from '@stylistic/eslint-plugin'
+
+export default [
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parser: tsParser,
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: import.meta.dirname,
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tsEslintPlugin,
+      '@angular-eslint': angularEslint,
+      '@stylistic': stylistic,
+    },
+    rules: {
+      ...tsEslintPlugin.configs.recommended.rules,
+      ...angularEslint.configs.recommended.rules,
+      ...tsEslintPlugin.configs.strict.rules,
+      ...tsEslintPlugin.configs.stylistic.rules,
+      ...stylistic.configs.recommended.rules
+    },
+  },
+  {
+    files: ['**/*.html'],
+    languageOptions: {
+      parser: angularParser,
+    },
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    rules: {
+      ...angularTemplate.configs.recommended.rules,
+    },
+  },
+  {
+    files: ['**/*.spec.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.jasmine,
+      },
+      parser: tsParser,
+      parserOptions: {
+        project: ['./tsconfig.spec.json'],
+        tsconfigRootDir: import.meta.dirname,
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tsEslintPlugin,
+      '@angular-eslint': angularEslint,
+    },
+    rules: {
+      ...tsEslintPlugin.configs.recommended.rules,
+      ...angularEslint.configs.recommended.rules,
+    },
+  },
+];

openalprwebhookprocessor.client/eslint.config.mjs

@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      
     ],
     client: {
       jasmine: {

openalprwebhookprocessor.client/karma.conf.js

@@ -5,6 +5,6 @@
     <!-- Allows the build (or compile) script located on package.json to run on Build -->
     <ShouldRunBuildScript>false</ShouldRunBuildScript>
     <!-- Folder where production build objects will be placed -->
-    <PublishAssetsDirectory>$(MSBuildProjectDirectory)\dist\openalprwebhookprocessor.client\</PublishAssetsDirectory>
+    <PublishAssetsDirectory>$(MSBuildProjectDirectory)\dist\openalprwebhookprocessor.client\browser\</PublishAssetsDirectory>
   </PropertyGroup>
 </Project>