feat(Angular): update to v22

.github/workflows/on-gh-release.yml

@@ -28,6 +28,9 @@ jobs:
     needs: one_run
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
       - name: get-npm-version
         id: package-version

.github/workflows/on-publish.yml

@@ -27,6 +27,9 @@ jobs:
     needs: one_run
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         id: cache
         with:
@@ -41,6 +44,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         with:
           path: node_modules
@@ -60,6 +66,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         with:
           path: node_modules
@@ -72,6 +81,9 @@ jobs:
     needs: build
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/checkout@v3
         with:
           ref: 'gh-pages'
@@ -107,6 +119,9 @@ jobs:
     needs: build
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         with:
           path: node_modules

.github/workflows/on-push-or-pull.yml

@@ -37,6 +37,9 @@ jobs:
     needs: one_run
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         id: cache
         with:
@@ -51,6 +54,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
@@ -67,6 +73,9 @@ jobs:
     needs: build
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
@@ -84,6 +93,9 @@ jobs:
     needs: install
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
@@ -98,6 +110,9 @@ jobs:
       output_url: ${{ steps.firebase_hosting_preview.outputs.details_url }}
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_DIST_PATH }}

.gitignore

@@ -43,3 +43,6 @@ scripts/**/*.map
 .nx/
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+
+.claude/worktrees
+.claude/settings.local.json

.nvmrc

@@ -0,0 +1 @@
+24

apps/demo/eslint.config.mjs

@@ -0,0 +1,23 @@
+
+import baseConfig from "../../eslint.config.mjs";
+import nx from "@nx/eslint-plugin";
+
+export default [
+    ...baseConfig,
+    ...nx.configs["flat/angular"],
+    {
+        files: [
+            "**/*.ts"
+        ],
+        rules: {
+            "@angular-eslint/prefer-standalone": [
+                "off"
+            ],
+            // Angular 22 migration pins existing components to ChangeDetectionStrategy.Eager to keep v21 behavior
+            "@angular-eslint/prefer-on-push-component-change-detection": [
+                "off"
+            ]
+        }
+    },
+    ...nx.configs["flat/angular-template"]
+];

apps/demo/project.json

@@ -10,6 +10,13 @@
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
+      "defaultConfiguration": "production",
       "options": {
         "outputPath": "dist/apps/demo",
         "index": "apps/demo/src/index.html",
@@ -28,12 +35,6 @@
         "optimization": false,
         "namedChunks": true
       },
-      "dependsOn": [
-        {
-          "target": "build",
-          "dependencies": true
-        }
-      ],
       "configurations": {
         "production": {
           "optimization": true,
@@ -51,31 +52,30 @@
             }
           ]
         }
-      },
-      "defaultConfiguration": "production"
+      }
     },
     "serve": {
       "executor": "@angular-devkit/build-angular:dev-server",
+      "continuous": true,
       "options": {
         "buildTarget": "ng2-file-upload-demo:build:production"
       },
       "configurations": {
         "production": {
           "buildTarget": "ng2-file-upload-demo:build"
         }
-      },
-      "continuous": true
+      }
     },
     "lint": {
       "executor": "@nx/eslint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
         "lintFilePatterns": [
           "apps/demo/**/*.ts"
         ]
-      },
-      "outputs": [
-        "{options.outputFile}"
-      ]
+      }
     }
   }
 }

apps/demo/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const gettingStarted = require('html-loader!markdown-loader!../getting-started.md');
 
@@ -41,6 +41,7 @@ const gettingStarted = require('html-loader!markdown-loader!../getting-started.m
     </div>
   </footer>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false
 })
 export class AppComponent {

apps/demo/src/app/app.module.ts

@@ -11,7 +11,7 @@ import { FileUploadSectionComponent } from './components/file-upload-section';
 import { SimpleDemoComponent } from './components/file-upload/simple-demo';
 
 @NgModule({
-  imports: [BrowserModule, CommonModule, FileUploadModule, TabsModule.forRoot(), FormsModule],
+  imports: [BrowserModule, CommonModule, FileUploadModule, TabsModule, FormsModule],
   declarations: [AppComponent, FileUploadSectionComponent, SimpleDemoComponent],
   bootstrap: [AppComponent],
   providers: []

apps/demo/src/app/components/file-upload-section.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const doc = require('html-loader!markdown-loader!../../doc.md');
 
@@ -17,6 +17,7 @@ const tabDesc: Array<any> = [
 @Component({
   selector: 'file-upload-section',
   templateUrl: './file-upload-section.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false
 })
 export class FileUploadSectionComponent {

apps/demo/src/app/components/file-upload/simple-demo.html

@@ -63,7 +63,7 @@ <h3>Upload queue</h3>
               <tr>
                 <td data-label="Name"><strong>{{ item?.file?.name }}</strong></td>
                 @if (uploader.options.isHTML5) {
-                  <td data-label="Size" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
+                  <td data-label="Size" nowrap>{{ item.file.size/1024/1024 | number:'.2' }} MB</td>
                 }
                 @if (uploader.options.isHTML5) {
                   <td data-label="Progress">

apps/demo/src/app/components/file-upload/simple-demo.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { FileUploader } from 'ng2-file-upload';
 
 // const URL = '/api/';
@@ -7,6 +7,7 @@ const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
 @Component({
   selector: 'simple-demo',
   templateUrl: './simple-demo.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false
 })
 export class SimpleDemoComponent {