Migrate to Angular 16

angular.json

@@ -125,7 +125,6 @@
       }
     }
   },
-  "defaultProject": "budget",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "",

package.json

@@ -25,39 +25,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cli": "^13.2.4",
-    "@angular/compiler-cli": "^13.2.3",
-    "@angular-devkit/core": "^13.2.4",
-    "@angular/animations": "^13.2.3",
-    "@angular/cdk": "^13.2.3",
-    "@angular/common": "^13.2.3",
-    "@angular/compiler": "^13.2.3",
-    "@angular/core": "^13.2.3",
-    "@angular/forms": "^13.2.3",
-    "@angular/material": "^13.2.3",
-    "@angular/platform-browser": "^13.2.3",
-    "@angular/platform-browser-dynamic": "^13.2.3",
-    "@angular/router": "^13.2.3",
+    "@angular/cli": "^16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@angular-devkit/core": "^16.0.0",
+    "@angular/animations": "^16.0.0",
+    "@angular/cdk": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/material": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/router": "^16.0.0",
     "@briebug/jest-schematic": "^4.0.0",
-    "angular-in-memory-web-api": "^0.13.0",
+    "angular-in-memory-web-api": "^0.15.0",
     "core-js": "^3.19.0",
     "express": "^4.17.3",
     "jest-preset-angular": "^11.1.1",
-    "ng-qrcode": "^6.0.0",
+    "ng-qrcode": "^16.0.0",
     "path": "^0.12.7",
     "rxjs": "^6.6.7",
     "webpack-bundle-analyzer": "^4.0.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
     "@angular-builders/jest": "latest",
-    "@angular-devkit/build-angular": "^13.2.4",
-    "@angular-eslint/builder": "13.1.0",
-    "@angular-eslint/eslint-plugin": "13.1.0",
-    "@angular-eslint/eslint-plugin-template": "13.1.0",
-    "@angular-eslint/schematics": "13.1.0",
-    "@angular-eslint/template-parser": "13.1.0",
-    "@angular/language-service": "^13.2.3",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-eslint/builder": "16.0.0",
+    "@angular-eslint/eslint-plugin": "16.0.0",
+    "@angular-eslint/eslint-plugin-template": "16.0.0",
+    "@angular-eslint/schematics": "16.0.0",
+    "@angular-eslint/template-parser": "16.0.0",
+    "@angular/language-service": "^16.0.0",
     "@pact-foundation/pact": "^9.16.5",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.10",
@@ -73,7 +73,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "jest": "^27.3.1",
+    "jest": "^29.5.0",
     "json-server": "^0.17.0",
     "karma-cli": "~2.0.0",
     "lint-staged": "^12.3.4",
@@ -89,7 +89,7 @@
     "stylelint-scss": "^4.1.0",
     "ts-node": "~8.6.2",
     "tslint": "^6.1.3",
-    "typescript": "^4.5.5"
+    "typescript": "^5.0.4"
   },
   "lint-staged": {
     "*.{js,ts}": [

src/app/app-routing.module.ts

@@ -34,7 +34,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: "legacy" })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/auth/containers/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from "@angular/forms";
 import { Router, ActivatedRoute } from "@angular/router";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { MatDialog } from "@angular/material/dialog";
@@ -19,14 +19,14 @@ import { HttpErrorResponse } from "@angular/common/http";
   styleUrls: ["./../auth.scss"],
 })
 export class LoginComponent implements OnInit {
-  loginForm: FormGroup;
+  loginForm: UntypedFormGroup;
   githubLogin = "Login with GitHub";
   googleLogin = "Login with Google";
 
   constructor(
     private authService: AuthService,
     private oauthService: OAuthService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private snackBar: MatSnackBar,
     private dialog: MatDialog,
     private route: ActivatedRoute,

src/app/auth/containers/password/password.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from "@angular/forms";
 import { PasswordService } from "../../services/password.service";
 import { Observable } from "rxjs";
 
@@ -12,14 +12,14 @@ import { Observable } from "rxjs";
 export class PasswordComponent implements OnInit {
   public isFinished: boolean;
   public email: string;
-  public passwordForm: FormGroup;
+  public passwordForm: UntypedFormGroup;
   public recovery: boolean;
   public task: string;
   private code: string;
 
   constructor(
     private activeRoute: ActivatedRoute,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private passwordService: PasswordService
   ) {}
 

src/app/auth/containers/recover/recover.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from "@angular/forms";
 import { PasswordService } from "../../services/password.service";
 
 @Component({
@@ -9,10 +9,10 @@ import { PasswordService } from "../../services/password.service";
 })
 export class RecoverComponent implements OnInit {
   isRequestSent: boolean;
-  public recoveryForm: FormGroup;
+  public recoveryForm: UntypedFormGroup;
 
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private passwordService: PasswordService
   ) {}
 

src/app/auth/containers/signup/signup.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 import { AuthService } from "../../services/auth.service";
 
@@ -9,13 +9,13 @@ import { AuthService } from "../../services/auth.service";
   styleUrls: ["./../auth.scss"],
 })
 export class SignupComponent implements OnInit {
-  signupForm: FormGroup;
+  signupForm: UntypedFormGroup;
   githubSignup = "Signup with GitHub";
   googleSignup = "Signup with Google";
 
   constructor(
     private authService: AuthService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private router: Router
   ) {}
 

src/app/auth/guards/app.guard.ts

@@ -1,13 +1,13 @@
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
 import { tap } from "rxjs/operators";
-import { CanActivate, CanLoad, Router } from "@angular/router";
+import { Router } from "@angular/router";
 import { AuthService } from "../services/auth.service";
 
 @Injectable({
   providedIn: "root",
 })
-export class AppGuard implements CanActivate, CanLoad {
+export class AppGuard  {
   constructor(private authService: AuthService, private router: Router) {}
 
   canActivate(): Observable<boolean> {

src/app/auth/guards/auth.guard.ts

@@ -1,13 +1,13 @@
 import { Injectable } from "@angular/core";
-import { CanActivate, Router } from "@angular/router";
+import { Router } from "@angular/router";
 import { Observable } from "rxjs";
 import { map, tap } from "rxjs/operators";
 import { AuthService } from "../services/auth.service";
 
 @Injectable({
   providedIn: "root",
 })
-export class AuthGuard implements CanActivate {
+export class AuthGuard  {
   constructor(private authService: AuthService, private router: Router) {}
 
   canActivate(): Observable<boolean> {

src/app/expenses/components/expense-dialog/expense-dialog-component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation, OnInit } from "@angular/core";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { Observable } from "rxjs";
 
 import { Expense } from "@models/expense";
@@ -21,15 +21,15 @@ export type SubmitExpenseCallback = (expense: Expense) => Observable<void>;
   encapsulation: ViewEncapsulation.None,
 })
 export class ExpenseDialogComponent implements OnInit {
-  expenseForm: FormGroup;
+  expenseForm: UntypedFormGroup;
   expense: Expense;
   newCategory = new ExpenseCategory();
   categories: ExpenseCategory[] = [];
   submitText: string;
   inProgress: boolean;
 
   constructor(
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     public dialogRef: MatDialogRef<ExpenseDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: ExpenseDialogData
   ) {}

src/app/expenses/expenses.module.ts

@@ -10,15 +10,14 @@ import { ExpensesTableComponent } from "./components/expenses-table/expenses-tab
 import { ConfirmDeleteComponent } from "./components/confirm-delete/confirm-delete.component";
 import { ExpenseDialogComponent } from "./components/expense-dialog/expense-dialog-component";
 
-@NgModule({
-  imports: [SharedModule, ReactiveFormsModule, ExpensesRoutingModule],
-  declarations: [
-    ExpensesComponent,
-    ExpensesTableComponent,
-    ConfirmDeleteComponent,
-    ExpenseDialogComponent,
-  ],
-  entryComponents: [ExpenseDialogComponent, ConfirmDeleteComponent],
-  providers: [ExpensesService, ExpenseApi],
+@NgModule({
+    imports: [SharedModule, ReactiveFormsModule, ExpensesRoutingModule],
+    declarations: [
+        ExpensesComponent,
+        ExpensesTableComponent,
+        ConfirmDeleteComponent,
+        ExpenseDialogComponent,
+    ],
+    providers: [ExpensesService, ExpenseApi]
 })
 export class ExpensesModule {}

src/app/settings/account/components/user-dialog/user-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation, OnInit } from "@angular/core";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { User } from "@models/user";
 import { Role } from "@models/types";
 
@@ -13,12 +13,12 @@ import { Role } from "@models/types";
 export class UserDialogComponent implements OnInit {
   user: User;
   roles: Role[];
-  userForm: FormGroup;
+  userForm: UntypedFormGroup;
   inProgress: boolean;
   submitText: string;
 
   constructor(
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     public dialogRef: MatDialogRef<UserDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {}

src/app/settings/categories/categories.module.ts

@@ -12,20 +12,19 @@ import { CategoriesFacade } from "./categories.facade";
 import { CategoriesState } from "./categories.state";
 import { EditingGuard } from "./guards/editing.guard";
 
-@NgModule({
-  imports: [SharedModule, CategoriesRoutingModule, ReactiveFormsModule],
-  declarations: [
-    CategoriesComponent,
-    CategoryFormComponent,
-    CategoryListComponent,
-    EditingDialogComponent,
-  ],
-  providers: [
-    ExpenseCategoryResolver,
-    CategoriesFacade,
-    CategoriesState,
-    EditingGuard,
-  ],
-  entryComponents: [EditingDialogComponent],
+@NgModule({
+    imports: [SharedModule, CategoriesRoutingModule, ReactiveFormsModule],
+    declarations: [
+        CategoriesComponent,
+        CategoryFormComponent,
+        CategoryListComponent,
+        EditingDialogComponent,
+    ],
+    providers: [
+        ExpenseCategoryResolver,
+        CategoriesFacade,
+        CategoriesState,
+        EditingGuard,
+    ]
 })
 export class CategoriesModule {}

src/app/settings/categories/components/category-form/category-form.component.ts

@@ -7,11 +7,11 @@ import {
   EventEmitter,
 } from "@angular/core";
 import {
-  FormBuilder,
+  UntypedFormBuilder,
   Validators,
-  FormGroup,
-  FormArray,
-  FormControl,
+  UntypedFormGroup,
+  UntypedFormArray,
+  UntypedFormControl,
 } from "@angular/forms";
 
 import { ExpenseCategory } from "@models/expenseCategory";
@@ -27,9 +27,9 @@ export class CategoryFormComponent implements OnInit {
   @Input() category: ExpenseCategory;
   @Output() categoryAdded: EventEmitter<ExpenseCategory> = new EventEmitter();
   @Output() categoryUpdated: EventEmitter<ExpenseCategory> = new EventEmitter();
-  categoryForm: FormGroup;
+  categoryForm: UntypedFormGroup;
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private fb: UntypedFormBuilder) {}
 
   ngOnInit() {
     const patternsInitial = this.category.counterpartyPatterns.map((pattern) =>
@@ -61,11 +61,11 @@ export class CategoryFormComponent implements OnInit {
     this.categoryForm.markAsPristine();
   }
 
-  get patterns(): FormArray {
-    return this.categoryForm.get("counterpartyPatterns") as FormArray;
+  get patterns(): UntypedFormArray {
+    return this.categoryForm.get("counterpartyPatterns") as UntypedFormArray;
   }
 
   private createPatternInput(value: string) {
-    return new FormControl(value, [Validators.required]);
+    return new UntypedFormControl(value, [Validators.required]);
   }
 }

src/app/settings/categories/guards/editing.guard.ts

@@ -1,13 +1,13 @@
 import { Injectable } from "@angular/core";
-import { CanDeactivate } from "@angular/router";
+
 import { MatDialog } from "@angular/material/dialog";
 import { Observable, of } from "rxjs";
 
 import { CategoriesComponent } from "../container/categories.component";
 import { EditingDialogComponent } from "../components/editing-dialog/editing-dialog.component";
 
 @Injectable()
-export class EditingGuard implements CanDeactivate<CategoriesComponent> {
+export class EditingGuard  {
   constructor(private dialog: MatDialog) {}
 
   canDeactivate(categoriesComponent: CategoriesComponent): Observable<boolean> {