Update Angular to Angular 18 (#675)

Author: frederikprijck

.eslintrc.json

@@ -9,8 +9,7 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "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"
       ],
       "rules": {

.github/actions/build/action.yml

@@ -5,7 +5,7 @@ inputs:
   node:
     description: The Node version to use
     required: false
-    default: 18
+    default: 22
 
 runs:
   using: composite

.github/workflows/browserstack.yml

@@ -19,13 +19,11 @@ concurrency:
   cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 
 env:
-  NODE_VERSION: 18
+  NODE_VERSION: 22
   CACHE_KEY: '${{ github.event.pull_request.head.sha || github.ref }}-${{ github.run_id }}-${{ github.run_attempt }}'
 
 jobs:
-
   browserstack:
-
     name: BrowserStack Tests
     runs-on: ubuntu-latest
 

.github/workflows/publish.yml

@@ -22,7 +22,7 @@ permissions:
   id-token: write # For publishing to NPM with provenance. Allows developers to run `npm audit signatures` and verify release signature of SDK. @see https://github.blog/2023-04-19-introducing-npm-package-provenance/
 
 env:
-  NODE_VERSION: 18
+  NODE_VERSION: 22
   NODE_ENV: development
 
 jobs:
@@ -52,8 +52,7 @@ jobs:
       # Build the tag string from package.json version and release suffix. Produces something like `1.0.0-beta.1` for a beta, or `1.0.0` for a stable release.
       - name: Build tag
         id: vtag
-        env:
-          PACKAGE_VERSION="${{ github.event.inputs.version }}"
+        env: PACKAGE_VERSION="${{ github.event.inputs.version }}"
         run: |
           echo "vtag=${PACKAGE_VERSION}" >> $GITHUB_ENV
           echo "vtag=${PACKAGE_VERSION}" >> $GITHUB_OUTPUT

.github/workflows/release.yml

@@ -18,8 +18,8 @@ jobs:
   rl-scanner:
     uses: ./.github/workflows/rl-secure.yml
     with:
-      node-version: 18 ## depends if build requires node else we can remove this.
-      artifact-name: 'auth0-angular.tgz' ## Will change respective to Repository 
+      node-version: 22 ## depends if build requires node else we can remove this.
+      artifact-name: 'auth0-angular.tgz' ## Will change respective to Repository
     secrets:
       RLSECURE_LICENSE: ${{ secrets.RLSECURE_LICENSE }}
       RLSECURE_SITE_KEY: ${{ secrets.RLSECURE_SITE_KEY }}
@@ -32,7 +32,7 @@ jobs:
     uses: ./.github/workflows/npm-release.yml
     needs: rl-scanner ## this is important as this will not let release job to run until rl-scanner is done
     with:
-      node-version: 18
+      node-version: 22
       require-build: true
       release-directory: './dist/auth0-angular'
     secrets:

.github/workflows/test.yml

@@ -18,7 +18,7 @@ concurrency:
   cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 
 env:
-  NODE_VERSION: 18
+  NODE_VERSION: 22
   CACHE_KEY: '${{ github.ref }}-${{ github.run_id }}-${{ github.run_attempt }}'
 
 jobs:
@@ -42,26 +42,27 @@ jobs:
           key: ${{ env.CACHE_KEY }}
 
   unit:
-    needs: build # Require build to complete before running tests
-
     name: Unit Tests
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        NODE_VERSION: [20, 22]
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: ${{ matrix.NODE_VERSION }}
           cache: npm
 
-      - name: Restore build artifacts
-        uses: actions/cache/restore@v4
+      - name: Build package
+        uses: ./.github/actions/build
         with:
-          path: .
-          key: ${{ env.CACHE_KEY }}
+          node: ${{ matrix.NODE_VERSION }}
 
       - name: Run tests
         run: npm run test:ci

angular.json

@@ -24,7 +24,6 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/auth0-angular/src/test.ts",
             "tsConfig": "projects/auth0-angular/tsconfig.spec.json",
             "karmaConfig": "projects/auth0-angular/karma.conf.js"
           }
@@ -48,12 +47,13 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/playground",
+            "outputPath": {
+              "base": "dist/playground"
+            },
             "index": "projects/playground/src/index.html",
-            "main": "projects/playground/src/main.ts",
-            "polyfills": "projects/playground/src/polyfills.ts",
+            "polyfills": ["projects/playground/src/polyfills.ts"],
             "tsConfig": "projects/playground/tsconfig.app.json",
             "assets": [
               "projects/playground/src/favicon.ico",
@@ -66,12 +66,11 @@
             ],
             "styles": ["projects/playground/src/styles.css"],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "projects/playground/src/main.ts"
           },
           "configurations": {
             "local": {
@@ -97,8 +96,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -117,29 +114,28 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "playground:build",
-            "host": "0.0.0.0"
+            "host": "0.0.0.0",
+            "buildTarget": "playground:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "playground:build"
+              "buildTarget": "playground:build"
             },
             "local": {
-              "browserTarget": "playground:build:local",
-              "proxyConfig": "projects/playground/src/proxy.conf.json"
+              "proxyConfig": "projects/playground/src/proxy.conf.json",
+              "buildTarget": "playground:build:local"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "playground:build"
+            "buildTarget": "playground:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/playground/src/test.ts",
             "polyfills": "projects/playground/src/polyfills.ts",
             "tsConfig": "projects/playground/tsconfig.spec.json",
             "karmaConfig": "projects/playground/karma.conf.js",
@@ -200,8 +196,7 @@
       }
     }
   },
-  "defaultProject": "auth0-angular",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": ["angular-eslint"]
   }
 }