chore: upgrade Angular to v22.0.8

ng update @angular/core@22.0.8 @angular/cli@22.0.8 (also bumped
TypeScript to 6.0.3, required by v22), plus bump
@fortawesome/angular-fontawesome to 5.1.0 (only major compatible with
Angular 22 as peer dependency).

Mandatory core migrations, all behavior-preserving:
- Every component now gets `changeDetection: ChangeDetectionStrategy.Eager`
  explicitly, since components without an explicit strategy now default
  to OnPush in v22 - this opts every existing component out of that
  change and keeps the previous "check always" behavior.
- app.config.ts: provideHttpClient(...) now also passes withXhr(),
  since v22 defaults HttpClient to a Fetch-based backend.
- tsconfig.app.json / tsconfig.spec.json: disables the new
  nullishCoalescingNotNullable / optionalChainNotNullable extended
  diagnostics (opt-out migration default, no code affected by them).

Build and test suite (7/7) pass. This completes the 17 -> 22 migration.

Author: samuelsonbrito

package-lock.json

@@ -10,27 +10,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.18",
-    "@angular/common": "^21.2.18",
-    "@angular/compiler": "^21.2.18",
-    "@angular/core": "^21.2.18",
-    "@angular/forms": "^21.2.18",
-    "@angular/platform-browser": "^21.2.18",
-    "@angular/platform-browser-dynamic": "^21.2.18",
-    "@angular/router": "^21.2.18",
-    "@fortawesome/angular-fontawesome": "^4.0.0",
+    "@angular/animations": "^22.0.8",
+    "@angular/common": "^22.0.8",
+    "@angular/compiler": "^22.0.8",
+    "@angular/core": "^22.0.8",
+    "@angular/forms": "^22.0.8",
+    "@angular/platform-browser": "^22.0.8",
+    "@angular/platform-browser-dynamic": "^22.0.8",
+    "@angular/router": "^22.0.8",
+    "@fortawesome/angular-fontawesome": "^5.1.0",
     "angular-font-awesome": "^3.1.2",
     "express": "^4.19.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^21.2.19",
-    "@angular/cli": "^21.2.19",
-    "@angular/compiler-cli": "^21.2.18",
+    "@angular-devkit/build-angular": "^22.0.8",
+    "@angular/cli": "^22.0.8",
+    "@angular/compiler-cli": "^22.0.8",
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.19",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
@@ -39,6 +40,6 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.1",
-    "typescript": "~5.9.3"
+    "typescript": "~6.0.3"
   }
 }

package.json

@@ -1,4 +1,4 @@
-import { Component, OnInit, Renderer2 } from '@angular/core';
+import { Component, OnInit, Renderer2, ChangeDetectionStrategy } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { LandingPageInicioComponent } from './page/landing-page-inicio/landing-page-inicio.component';
 import { HeaderLandingPageComponent } from './page/header-landing-page/header-landing-page.component';
@@ -13,6 +13,7 @@ import { NotFoundComponent } from './not-found/not-found.component';
         NotFoundComponent,
     ],
     templateUrl: './app.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrl: './app.component.css'
 })
 export class AppComponent implements OnInit {

src/app/app.component.ts

@@ -8,7 +8,7 @@ import {
 
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideHttpClient, withJsonpSupport } from '@angular/common/http';
+import { provideHttpClient, withJsonpSupport, withXhr } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -19,6 +19,6 @@ export const appConfig: ApplicationConfig = {
       withInMemoryScrolling({scrollPositionRestoration: 'enabled'})
     ),
     provideAnimationsAsync(),
-    provideHttpClient(withJsonpSupport())
+    provideHttpClient(withXhr(), withJsonpSupport())
   ],
 };

src/app/app.config.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { HeaderLandingPageComponent } from '../page/header-landing-page/header-landing-page.component';
 import { FooterComponent } from '../page/footer/footer.component';
 
 @Component({
     selector: 'app-not-found',
     imports: [HeaderLandingPageComponent, FooterComponent],
     templateUrl: './not-found.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrl: './not-found.component.css'
 })
 export class NotFoundComponent {

src/app/not-found/not-found.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, Renderer2 } from '@angular/core';
+import { Component, OnInit, Renderer2, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-button-toggle-dark-light',
     imports: [],
     templateUrl: './button-toggle-dark-light.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrl: './button-toggle-dark-light.component.css'
 })
 export class ButtonToggleDarkLightComponent implements OnInit{

src/app/page/button-toggle-dark-light/button-toggle-dark-light.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-footer',
     imports: [],
     templateUrl: './footer.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrl: './footer.component.css'
 })
 export class FooterComponent {

src/app/page/footer/footer.component.ts

@@ -1,11 +1,12 @@
-import { Component, ElementRef, EventEmitter, Input, input, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { ButtonToggleDarkLightComponent } from '../button-toggle-dark-light/button-toggle-dark-light.component';
 import { NgClass } from '@angular/common';
 
 @Component({
     selector: 'app-header-landing-page',
     imports: [ButtonToggleDarkLightComponent, NgClass],
     templateUrl: './header-landing-page.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrl: './header-landing-page.component.css'
 })
 export class HeaderLandingPageComponent {

src/app/page/header-landing-page/header-landing-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, OnInit, output, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnInit, output, Output, ChangeDetectionStrategy } from '@angular/core';
 import { HeaderLandingPageComponent } from '../header-landing-page/header-landing-page.component';
 import { FooterComponent } from '../footer/footer.component';
 import { SliderEventComponent } from '../slider-event/slider-event.component';
@@ -23,6 +23,7 @@ import { NgClass } from '@angular/common';
         NgClass,
     ],
     templateUrl: './landing-page-inicio.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrl: './landing-page-inicio.component.css'
 })
 export class LandingPageInicioComponent {

src/app/page/landing-page-inicio/landing-page-inicio.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   Output,
   EventEmitter,
+  ChangeDetectionStrategy
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
@@ -15,6 +16,7 @@ import { FormsModule } from '@angular/forms';
     selector: 'app-slider-event',
     imports: [FormsModule],
     templateUrl: './slider-event.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrl: './slider-event.component.css'
 })
 export class SliderEventComponent {