feat: upgrade Angular to v21 and Nx to v22

.eslintrc.json

@@ -23,7 +23,8 @@
             "prefix": "app",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

.github/workflows/firebase-hosting-merge.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3 # Cache node_modules to speed up builds
         with:
-          node-version: 18 # Use the version 18 of Node.js
+          node-version: 22 # Use the version 22 of Node.js
           cache: 'yarn' # Cache node_modules to speed up builds
 
       - name: Install Dependencies

.github/workflows/firebase-hosting-pull-request.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3 # Cache node_modules to speed up builds
         with:
-          node-version: 18 # Use the version 18 of Node.js
+          node-version: 22 # Use the version 22 of Node.js
           cache: 'yarn' # Cache node_modules to speed up builds
 
       - name: Install Dependencies

.gitignore

@@ -41,4 +41,5 @@ Thumbs.db
 .angular
 
 .nx/cache
+.nx/workspace-data
 /.firebase/

.husky/commit-msg

@@ -1 +1 @@
-npx --no -- commitlint --edit ${1}
+yarn commitlint --edit ${1}

.husky/pre-commit

@@ -1,2 +1,2 @@
-nx format:write
-nx affected -t lint,test --parallel=2
+yarn nx format:write
+yarn nx affected -t lint,test --parallel=2

.prettierignore

@@ -3,4 +3,5 @@
 /coverage
 .angular
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

nx.json

@@ -64,11 +64,62 @@
       "unitTestRunner": "jest"
     },
     "@nx/angular:component": {
-      "style": "scss"
+      "style": "scss",
+      "type": "component"
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@nx/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@nx/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@nx/angular:scam": {
+      "type": "component"
+    },
+    "@nx/angular:scam-directive": {
+      "type": "directive"
+    },
+    "@nx/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:resolver": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
   "defaultProject": "series-workspace",
-  "nxCloudAccessToken": "YzFkMzY0ZjItY2IzZi00ZDc5LTk4MzctMGZmZjNjZmE3ZGNlfHJlYWQtd3JpdGU=",
   "plugins": [
     {
       "plugin": "@nx/eslint/plugin",

package.json

@@ -10,57 +10,61 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "17.3.2",
-    "@angular/common": "17.3.2",
-    "@angular/compiler": "17.3.2",
-    "@angular/core": "17.3.2",
-    "@angular/forms": "17.3.2",
-    "@angular/platform-browser": "17.3.2",
-    "@angular/platform-browser-dynamic": "17.3.2",
-    "@angular/router": "17.3.2",
-    "@commitlint/cli": "^18.6.0",
+    "@angular/animations": "21.0.9",
+    "@angular/common": "21.0.9",
+    "@angular/compiler": "21.0.9",
+    "@angular/core": "21.0.9",
+    "@angular/forms": "21.0.9",
+    "@angular/platform-browser": "21.0.9",
+    "@angular/platform-browser-dynamic": "21.0.9",
+    "@angular/router": "21.0.9",
+    "@commitlint/cli": "^20.3.1",
     "@ngrx/component-store": "^17.0.1",
-    "@nx/angular": "18.2.1",
-    "ng-zorro-antd": "^17.1.3",
+    "@nx/angular": "22.3.3",
+    "ng-zorro-antd": "21.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "0.14.2"
+    "zone.js": "0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.2",
-    "@angular-devkit/core": "17.3.2",
-    "@angular-devkit/schematics": "17.3.2",
-    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "~17.3.0",
-    "@angular/compiler-cli": "17.3.2",
-    "@angular/language-service": "17.3.2",
-    "@nx/devkit": "18.2.1",
-    "@nx/eslint": "18.2.1",
-    "@nx/eslint-plugin": "18.2.1",
-    "@nx/jest": "18.2.1",
-    "@nx/js": "18.2.1",
-    "@nx/playwright": "18.2.1",
-    "@nx/workspace": "18.2.1",
+    "@angular-devkit/build-angular": "21.0.6",
+    "@angular-devkit/core": "21.0.6",
+    "@angular-devkit/schematics": "21.0.6",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/cli": "21.0.6",
+    "@angular/compiler-cli": "21.0.9",
+    "@angular/language-service": "21.0.9",
+    "@commitlint/config-conventional": "^20.3.1",
+    "@nx/devkit": "22.3.3",
+    "@nx/eslint": "22.3.3",
+    "@nx/eslint-plugin": "22.3.3",
+    "@nx/jest": "22.3.3",
+    "@nx/js": "22.3.3",
+    "@nx/playwright": "22.3.3",
+    "@nx/workspace": "22.3.3",
     "@playwright/test": "^1.41.2",
-    "@schematics/angular": "17.3.2",
-    "@types/jest": "^29.4.0",
+    "@schematics/angular": "21.0.6",
+    "@types/jest": "30.0.0",
     "@types/node": "^18.16.9",
     "@typescript-eslint/eslint-plugin": "7.4.0",
     "@typescript-eslint/parser": "7.4.0",
+    "@typescript-eslint/utils": "^7.16.0",
     "eslint": "8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "10.1.8",
     "eslint-plugin-playwright": "^0.15.3",
     "husky": "^9.0.6",
-    "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
-    "jest-preset-angular": "14.0.3",
+    "jest": "30.0.5",
+    "jest-environment-jsdom": "30.0.5",
+    "jest-preset-angular": "16.0.0",
+    "jest-util": "30.0.5",
     "jsonc-eslint-parser": "^2.1.0",
-    "nx": "18.2.1",
+    "nx": "22.3.3",
     "prettier": "^2.6.2",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "29.4.6",
     "ts-node": "^10.9.2",
-    "typescript": "5.4.3"
-  }
+    "typescript": "5.9.3"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

project.json

@@ -64,7 +64,8 @@
           "buildTarget": "series-workspace:build:development"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -82,7 +83,8 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectName}"],
       "options": {
-        "jestConfig": "jest.config.app.ts"
+        "jestConfig": "jest.config.app.ts",
+        "tsConfig": "tsconfig.spec.json"
       }
     }
   }

src/app/series/search/components/results/results.component.spec.ts

@@ -6,9 +6,7 @@ import { DebugElement } from '@angular/core';
 import { SeriesMock } from '../../../tests/series.mocks';
 
 describe('ResultsComponent', () => {
-  let component: ResultsComponent;
   let fixture: ComponentFixture<ResultsComponent>;
-  let de: DebugElement;
   let cardsElements: DebugElement[];
 
   beforeEach(async () => {
@@ -17,7 +15,7 @@ describe('ResultsComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(ResultsComponent);
-    component = fixture.componentInstance;
+
     fixture.detectChanges();
     fixture.componentRef.setInput('series', SeriesMock);
     fixture.componentRef.setInput('state', 'loaded');

src/app/series/search/components/results/results.component.ts

@@ -5,7 +5,7 @@ import {
   input,
   output,
 } from '@angular/core';
-import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { NgOptimizedImage } from '@angular/common';
 import { NzEmptyComponent } from 'ng-zorro-antd/empty';
 import { NzCardComponent, NzCardMetaComponent } from 'ng-zorro-antd/card';
 import { NzPaginationComponent } from 'ng-zorro-antd/pagination';
@@ -19,7 +19,6 @@ import { NzTagComponent } from 'ng-zorro-antd/tag';
   selector: 'app-results',
   standalone: true,
   imports: [
-    CommonModule,
     NzEmptyComponent,
     NzCardComponent,
     NzCardMetaComponent,

src/app/series/search/components/search/search.component.ts

@@ -6,7 +6,7 @@ import {
   input,
   output,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import {
   NzFormControlComponent,
   NzFormDirective,
@@ -29,11 +29,9 @@ import { ComponentState } from '../../../../shared/models';
   selector: 'app-search',
   standalone: true,
   imports: [
-    CommonModule,
     NzFormDirective,
     ReactiveFormsModule,
     NzFormItemComponent,
-    NzFormLabelComponent,
     NzFormControlComponent,
     NzColDirective,
     NzInputDirective,
@@ -45,7 +43,6 @@ import { ComponentState } from '../../../../shared/models';
   templateUrl: './search.component.html',
   styleUrl: './search.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: { class: 'inner-content' },
 })
 export class SearchComponent {

src/app/series/series.store.ts

@@ -1,4 +1,4 @@
-import { Injectable, Signal } from '@angular/core';
+import { Injectable, Signal, inject } from '@angular/core';
 import { ComponentStore, tapResponse } from '@ngrx/component-store';
 import {
   ComponentState,
@@ -61,7 +61,9 @@ export class SeriesStore extends ComponentStore<SeriesState> {
     (series, state) => ({ series, state })
   );
 
-  constructor(private readonly seriesService: SeriesService) {
+  private readonly seriesService = inject(SeriesService);
+
+  constructor() {
     super(initialSeriesState); // <--- Initialization when the store is created
   }
 

src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err)
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

src/test-setup.ts

@@ -5,4 +5,6 @@ globalThis.ngJest = {
     errorOnUnknownProperties: true,
   },
 };
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();

tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

tsconfig.json

@@ -3,13 +3,13 @@
     "rootDir": ".",
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es2022",
-    "module": "esnext",
-    "lib": ["es2020", "dom"],
+    "module": "preserve",
+    "lib": ["dom", "es2022"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",

tsconfig.spec.json

@@ -2,9 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [