chore: migrate to angular 21

* Uses signals.
* Changes directory structure.
* Uses ngrx signal store.
* Makes all component stadalone.
* Uses vitest for the tests.

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
Co-Authored-by: Johnny Mariéthoz <Johnny.Mariethoz@rero.ch>

Author: Garfield-fr

.github/workflows/main.yml

@@ -7,6 +7,10 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [20.19.x, 22.12.x, 24.0.x]
+
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js 22
@@ -15,8 +19,10 @@ jobs:
         node-version: 22
     - name: install package
       run: |
-        npm install -g @angular/cli@19
+        npm install -g @angular/cli@20
         npm ci
+    - name: Install Playwright browsers
+      run: npx playwright install --with-deps chromium
     - name: run tests
       run: |
         ./run-tests.sh

angular.json

@@ -3,24 +3,13 @@
   "version": 1,
   "projects": {
     "@rero/ng-core": {
-      "schematics": {
-        "@schematics/angular:component": {
-          "standalone": false
-        },
-        "@schematics/angular:directive": {
-            "standalone": false
-        },
-        "@schematics/angular:pipe" : {
-            "standalone": false
-        }
-      },
       "projectType": "library",
       "root": "projects/rero/ng-core",
       "sourceRoot": "projects/rero/ng-core/src",
       "prefix": "ng-core",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "tsConfig": "projects/rero/ng-core/tsconfig.lib.json",
             "project": "projects/rero/ng-core/ng-package.json"
@@ -32,11 +21,11 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "projects/rero/ng-core/src/test.ts",
-            "tsConfig": "projects/rero/ng-core/tsconfig.spec.json",
-            "karmaConfig": "projects/rero/ng-core/karma.conf.js"
+            "buildTarget": "ng-core-tester:build",
+            "browsers": ["chromium"],
+            "tsConfig": "projects/rero/ng-core/tsconfig.spec.json"
           }
         },
         "lint": {
@@ -49,49 +38,25 @@
     },
     "ng-core-tester": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "standalone": false
-        },
-        "@schematics/angular:directive": {
-            "standalone": false
-        },
-        "@schematics/angular:pipe" : {
-            "standalone": false
-        }
-      },
       "root": "projects/ng-core-tester",
       "sourceRoot": "projects/ng-core-tester/src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
-            "allowedCommonJsDependencies": [
-              "crypto-js",
-              "easymde",
-              "js-generate-password"
-            ],
+            "allowedCommonJsDependencies": ["crypto-js", "easymde", "js-generate-password"],
             "outputPath": {
               "base": "dist/ng-core-tester"
             },
             "index": "projects/ng-core-tester/src/index.html",
-            "polyfills": [
-              "projects/ng-core-tester/src/polyfills.ts"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "projects/ng-core-tester/tsconfig.app.json",
-            "assets": [
-              "projects/ng-core-tester/src/favicon.ico",
-              "projects/ng-core-tester/src/assets"
-            ],
-            "styles": [
-              "projects/ng-core-tester/src/styles.scss"
-            ],
-              "stylePreprocessorOptions": {
-                "includePaths": [
-                  "projects/rero/ng-core/assets/scss"
-                ]
-              },
+            "assets": ["projects/ng-core-tester/src/favicon.ico", "projects/ng-core-tester/src/assets"],
+            "styles": ["projects/ng-core-tester/src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["projects/rero/ng-core/assets/scss"]
+            },
             "extractLicenses": false,
             "sourceMap": true,
             "optimization": false,
@@ -127,7 +92,7 @@
           "defaultConfiguration": ""
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "ng-core-tester:build"
           },
@@ -144,46 +109,52 @@
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "ng-core-tester:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "projects/ng-core-tester/src/test.ts",
-            "polyfills": "projects/ng-core-tester/src/polyfills.ts",
-            "tsConfig": "projects/ng-core-tester/tsconfig.spec.json",
-            "karmaConfig": "projects/ng-core-tester/karma.conf.js",
-            "assets": [
-              "projects/ng-core-tester/src/favicon.ico",
-              "projects/ng-core-tester/src/assets"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "projects/ng-core-tester/e2e/protractor.conf.js",
-            "devServerTarget": "ng-core-tester:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "ng-core-tester:serve:production"
-            }
+            "buildTarget": "ng-core-tester:build",
+            "browsers": ["chromium"],
+            "tsConfig": "projects/ng-core-tester/tsconfig.spec.json"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "projects/ng-core-tester/src/**/*.ts",
-              "projects/ng-core-tester/src/**/*.html"
-            ]
+            "lintFilePatterns": ["projects/ng-core-tester/src/**/*.ts", "projects/ng-core-tester/src/**/*.html"]
           }
         }
       }
     }
+  },
+  "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": "."
+    }
   }
 }

eslint.config.js eslint.config.mjseslint.config.js renamed to eslint.config.mjs

@@ -1,24 +1,31 @@
 // @ts-check
-const eslint = require('@eslint/js');
-const tseslint = require('typescript-eslint');
-const angular = require('angular-eslint');
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import angular from 'angular-eslint';
+import { defineConfig } from "eslint/config";
 
-module.exports = tseslint.config(
+export default defineConfig(
   {
     files: ['**/*.ts'],
-    extends: [eslint.configs.recommended, ...tseslint.configs.recommended, ...tseslint.configs.stylistic, ...angular.configs.tsRecommended],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended
+    ],
     processor: angular.processInlineTemplates,
     rules: {
-      '@angular-eslint/prefer-standalone': 'off',
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-unused-vars': 'warn',
+      '@angular-eslint/prefer-standalone': 'error',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
       '@angular-eslint/component-class-suffix': 'warn',
       '@angular-eslint/no-output-on-prefix': 'warn',
       '@angular-eslint/no-output-native': 'warn',
       '@typescript-eslint/no-unsafe-function-type': 'warn',
       '@angular-eslint/directive-selector': [
         'error',
         {
+          prefix: ['ngCore', 'app'],
           style: 'camelCase',
           type: 'attribute',
         },
@@ -35,7 +42,10 @@ module.exports = tseslint.config(
   },
   {
     files: ['**/*.html'],
-    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility
+    ],
     rules: {
       '@angular-eslint/template/click-events-have-key-events': 'warn',
       '@angular-eslint/template/interactive-supports-focus': 'warn',