feat(): migrate to Angular v22

apps/angular/1-projection/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CityCardComponent } from './component/city-card/city-card.component';
 import { StudentCardComponent } from './component/student-card/student-card.component';
 import { TeacherCardComponent } from './component/teacher-card/teacher-card.component';
@@ -12,6 +12,7 @@ import { TeacherCardComponent } from './component/teacher-card/teacher-card.comp
       <app-city-card />
     </div>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [TeacherCardComponent, StudentCardComponent, CityCardComponent],
 })
 export class AppComponent {}

apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts

@@ -1,4 +1,9 @@
-import { Component, inject, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { FakeHttpService } from '../../data-access/fake-http.service';
 import { TeacherStore } from '../../data-access/teacher.store';
 import { CardType } from '../../model/card.model';
@@ -19,6 +24,7 @@ import { CardComponent } from '../../ui/card/card.component';
       }
     `,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [CardComponent],
 })
 export class TeacherCardComponent implements OnInit {

apps/angular/1-projection/src/app/ui/card/card.component.ts

@@ -1,5 +1,10 @@
 import { NgOptimizedImage } from '@angular/common';
-import { Component, inject, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+} from '@angular/core';
 import { randStudent, randTeacher } from '../../data-access/fake-http.service';
 import { StudentStore } from '../../data-access/student.store';
 import { TeacherStore } from '../../data-access/teacher.store';
@@ -35,6 +40,7 @@ import { ListItemComponent } from '../list-item/list-item.component';
       </button>
     </div>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [ListItemComponent, NgOptimizedImage],
 })
 export class CardComponent {

apps/angular/1-projection/tsconfig.app.json

@@ -9,5 +9,13 @@
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/angular/10-utility-wrapper-pipe/src/app/app.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { PersonUtils } from './person.utils';
 
 @Component({
   selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     @for (activity of activities; track activity.name) {
       {{ activity.name }} :

apps/angular/10-utility-wrapper-pipe/tsconfig.app.json

@@ -9,5 +9,13 @@
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/angular/13-highly-customizable-css/src/app/page.component.ts

@@ -1,11 +1,12 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { TextStaticComponent } from './static-text.component';
 import { TextComponent } from './text.component';
 
 @Component({
   selector: 'page',
   imports: [TextStaticComponent, TextComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <static-text></static-text>
     <static-text type="error"></static-text>

apps/angular/13-highly-customizable-css/src/app/static-text.component.ts

@@ -1,12 +1,18 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, computed, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
 import { TextComponent } from './text.component';
 
 export type StaticTextType = 'normal' | 'warning' | 'error';
 
 @Component({
   selector: 'static-text',
   imports: [TextComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <text [font]="font()" [color]="color()">This is a static text</text>
   `,

apps/angular/13-highly-customizable-css/src/app/text.component.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'text',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <p style="font-size: {{ font() }}px; color: {{ color() }}">
       <ng-content />

apps/angular/13-highly-customizable-css/tsconfig.app.json

@@ -7,5 +7,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/angular/16-master-dependency-injection/tsconfig.app.json

@@ -7,5 +7,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/angular/21-anchor-navigation/src/app/app.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   imports: [RouterOutlet],
   selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <router-outlet></router-outlet>
   `,

apps/angular/21-anchor-navigation/src/app/foo.component.ts

@@ -1,12 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavButtonComponent } from './nav-button.component';
 
 @Component({
   imports: [NavButtonComponent],
   selector: 'app-foo',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     Welcome to foo page
-    <nav-button href="home" class="fixed left-1/2 top-3">Home Page</nav-button>
+    <nav-button href="home" class="fixed top-3 left-1/2">Home Page</nav-button>
     <div class="h-screen bg-blue-200">section 1</div>
     <div class="h-screen bg-red-200">section 2</div>
   `,

apps/angular/21-anchor-navigation/src/app/home.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavButtonComponent } from './nav-button.component';
 
 @Component({
   imports: [NavButtonComponent],
   selector: 'app-home',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
-    <nav-button href="/foo" class="fixed left-1/2 top-3">Foo Page</nav-button>
+    <nav-button href="/foo" class="fixed top-3 left-1/2">Foo Page</nav-button>
     <div id="top" class="h-screen bg-gray-500">
       Empty
       <nav-button href="#bottom">Scroll Bottom</nav-button>

apps/angular/21-anchor-navigation/src/app/nav-button.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'nav-button',
@@ -8,6 +8,7 @@ import { Component, input } from '@angular/core';
       <ng-content />
     </a>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {
     class: 'block w-fit border border-red-500 rounded-md p-4 m-2',
   },

apps/angular/21-anchor-navigation/tsconfig.app.json

@@ -7,5 +7,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/angular/22-router-input/src/app/app.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RouterLink, RouterModule } from '@angular/router';
 
 @Component({
   imports: [RouterLink, RouterModule, ReactiveFormsModule],
   selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <label for="userName">UserName</label>
     <input id="userName" type="text" [formControl]="userName" />

apps/angular/22-router-input/src/app/home.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
   selector: 'app-home',
   imports: [],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <div>Home</div>
   `,

apps/angular/22-router-input/src/app/test.component.ts

@@ -1,11 +1,12 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs';
 
 @Component({
   selector: 'app-subscription',
   imports: [AsyncPipe],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <div>TestId: {{ testId$ | async }}</div>
     <div>Permission: {{ permission$ | async }}</div>

apps/angular/22-router-input/tsconfig.app.json

@@ -7,5 +7,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/angular/31-module-to-standalone/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -25,6 +25,7 @@ import { Component } from '@angular/core';
   host: {
     class: 'flex flex-col p-4 gap-3',
   },
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class AppComponent {}

apps/angular/31-module-to-standalone/tsconfig.app.json

@@ -7,5 +7,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/angular/32-change-detection-bug/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
@@ -13,6 +13,7 @@ import { RouterOutlet } from '@angular/router';
       </div>
     </section>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {
     class: 'flex flex-col gap-2',
   },

apps/angular/32-change-detection-bug/src/app/bar.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-bar',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     BarComponent
   `,

apps/angular/32-change-detection-bug/src/app/foo.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-foo',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     Foo Component
   `,

apps/angular/32-change-detection-bug/src/app/main-navigation.component.ts

@@ -1,4 +1,9 @@
-import { Component, inject, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+} from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { FakeServiceService } from './fake.service';
@@ -27,6 +32,7 @@ interface MenuItem {
       @apply bg-gray-600 text-white;
     }
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {
     class: 'flex flex-col p-2 gap-2',
   },
@@ -44,6 +50,7 @@ export class NavigationComponent {
       <app-nav [menus]="getMenu('')" />
     }
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {},
 })
 export class MainNavigationComponent {

apps/angular/32-change-detection-bug/tsconfig.app.json

@@ -7,5 +7,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }