chore: update deps to v20 (#541)

Author: timdeschryver

apps/example-app-karma/eslint.config.mjs

@@ -1,8 +1,6 @@
 // @ts-check
 
-import tseslint from "typescript-eslint";
-import rootConfig from "../../eslint.config.mjs";
+import tseslint from 'typescript-eslint';
+import rootConfig from '../../eslint.config.mjs';
 
-export default tseslint.config(
-  ...rootConfig,
-);
+export default tseslint.config(...rootConfig);

apps/example-app-karma/src/app/examples/login-form.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/angular';
@@ -45,13 +45,13 @@ it('should display invalid message and submit button must be disabled', async ()
   `,
 })
 class LoginComponent {
+  private fb = inject(FormBuilder);
+
   form: FormGroup = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
     password: ['', [Validators.required, Validators.minLength(8)]],
   });
 
-  constructor(private fb: FormBuilder) {}
-
   get email(): FormControl {
     return this.form.get('email') as FormControl;
   }

apps/example-app-karma/src/app/issues/issue-491.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
@@ -43,7 +43,7 @@ it('test click event with router.navigate', async () => {
   `,
 })
 class LoginComponent {
-  constructor(private router: Router) {}
+  private readonly router = inject(Router);
   onSubmit(): void {
     this.router.navigate(['logged-in']);
   }

apps/example-app/eslint.config.mjs

@@ -1,8 +1,6 @@
 // @ts-check
 
-import tseslint from "typescript-eslint";
-import rootConfig from "../../eslint.config.mjs";
+import tseslint from 'typescript-eslint';
+import rootConfig from '../../eslint.config.mjs';
 
-export default tseslint.config(
-  ...rootConfig,
-);
+export default tseslint.config(...rootConfig);

apps/example-app/src/app/examples/03-forms.ts

@@ -1,5 +1,5 @@
 import { NgForOf, NgIf } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
@@ -33,6 +33,8 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
   `,
 })
 export class FormsComponent {
+  private formBuilder = inject(FormBuilder);
+
   colors = [
     { id: 'R', value: 'Red' },
     { id: 'B', value: 'Blue' },
@@ -45,8 +47,6 @@ export class FormsComponent {
     color: [null as string | null, Validators.required],
   });
 
-  constructor(private formBuilder: FormBuilder) {}
-
   get formErrors() {
     return Object.keys(this.form.controls)
       .map((formKey) => {

apps/example-app/src/app/examples/04-forms-with-material.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NgForOf, NgIf } from '@angular/common';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -84,6 +84,8 @@ import { MatNativeDateModule } from '@angular/material/core';
   ],
 })
 export class MaterialFormsComponent {
+  private formBuilder = inject(FormBuilder);
+
   colors = [
     { id: 'R', value: 'Red' },
     { id: 'B', value: 'Blue' },
@@ -97,8 +99,6 @@ export class MaterialFormsComponent {
     agree: [false, Validators.requiredTrue],
   });
 
-  constructor(private formBuilder: FormBuilder) {}
-
   get colorControlDisplayValue(): string | undefined {
     const selectedId = this.form.get('color')?.value;
     return this.colors.filter((color) => color.id === selectedId)[0]?.value;

apps/example-app/src/app/examples/05-component-provider.ts

@@ -1,4 +1,4 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, inject, Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
@@ -30,5 +30,5 @@ export class CounterService {
   providers: [CounterService],
 })
 export class ComponentWithProviderComponent {
-  constructor(public counter: CounterService) {}
+  protected counter = inject(CounterService);
 }

apps/example-app/src/app/examples/06-with-ngrx-store.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { createSelector, Store, createAction, createReducer, on, select } from '@ngrx/store';
 
 const increment = createAction('increment');
@@ -26,8 +26,9 @@ const selectValue = createSelector(
   `,
 })
 export class WithNgRxStoreComponent {
+  private store = inject(Store);
+
   value = this.store.pipe(select(selectValue));
-  constructor(private store: Store<any>) {}
 
   increment() {
     this.store.dispatch(increment());

apps/example-app/src/app/examples/07-with-ngrx-mock-store.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, NgForOf } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { createSelector, Store, select } from '@ngrx/store';
 
 export const selectItems = createSelector(
@@ -20,8 +20,9 @@ export const selectItems = createSelector(
   `,
 })
 export class WithNgRxMockStoreComponent {
+  private store = inject(Store);
+
   items = this.store.pipe(select(selectItems));
-  constructor(private store: Store<any>) {}
 
   send(item: string) {
     this.store.dispatch({ type: '[Item List] send', item });

apps/example-app/src/app/examples/08-directive.ts

@@ -1,15 +1,15 @@
-import { Directive, HostListener, ElementRef, Input, OnInit } from '@angular/core';
+import { Directive, HostListener, ElementRef, Input, OnInit, inject } from '@angular/core';
 
 @Directive({
   standalone: true,
   selector: '[atlSpoiler]',
 })
 export class SpoilerDirective implements OnInit {
+  private el = inject(ElementRef);
+
   @Input() hidden = 'SPOILER';
   @Input() visible = 'I am visible now...';
 
-  constructor(private el: ElementRef) {}
-
   ngOnInit() {
     this.el.nativeElement.textContent = this.hidden;
   }