Update to angular 22

src/ts/components/app/about/about.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { emojis } from '../../../common/emoji';
 import { getUrl } from '../../../client/rev';
 import { CREDITS, CONTRIBUTORS, Credit } from '../../../client/credits';
@@ -15,6 +15,7 @@ function toCredit(credit: Credit) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'about',
 	templateUrl: 'about.pug',

src/ts/components/app/account/account.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { ACCOUNT_NAME_MAX_LENGTH, ACCOUNT_NAME_MIN_LENGTH, HIDES_PER_PAGE } from '../../../common/constants';
 import { UpdateAccountData, SocialSiteInfo, OAuthProvider, HiddenPlayer } from '../../../common/interfaces';
 import {
@@ -12,6 +12,7 @@ import { Router } from '@angular/router';
 import { cleanName } from '../../../common/stringUtils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'account',
 	templateUrl: 'account.pug',

src/ts/components/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, ErrorHandler } from '@angular/core';
+import { NgModule, ErrorHandler, provideZoneChangeDetection } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
@@ -54,6 +54,7 @@ export const routes: Routes = [
 		EditorBox,
 	],
 	providers: [
+		provideZoneChangeDetection(),
 		{ provide: RollbarService, useFactory: rollbarFactory },
 		{ provide: ErrorHandler, useClass: RollbarErrorHandler },
 		{ provide: ErrorReporter, useClass: RollbarErrorReporter },

src/ts/components/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, HostListener, ViewChild, ElementRef, TemplateRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener, ViewChild, ElementRef, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { TooltipConfig } from 'ngx-bootstrap/tooltip';
 import { PopoverConfig } from 'ngx-bootstrap/popover';
@@ -28,6 +28,7 @@ export function popoverConfig() {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'pony-town-app',
 	templateUrl: 'app.pug',

src/ts/components/app/character/character.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { clamp } from 'lodash';
 import { PLAYER_NAME_MAX_LENGTH, PLAYER_DESC_MAX_LENGTH } from '../../../common/constants';
 import {
@@ -57,6 +57,7 @@ function eyeSprite(e: PonyEye | undefined) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'character',
 	templateUrl: 'character.pug',

src/ts/components/app/editor-box/editor-box.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone } from '@angular/core';
+import { Component, NgZone, ChangeDetectionStrategy } from '@angular/core';
 import { uniq } from 'lodash';
 import { faEdit, faCog, faDrawPolygon, faTrash, emptyIcon, faCheck } from '../../../client/icons';
 import { PonyTownGame, engines } from '../../../client/game';
@@ -9,6 +9,7 @@ import { BLACK } from '../../../common/colors';
 import { Entity, Engine, EngineInfo, DebugFlags, tileTypeNames } from '../../../common/interfaces';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'editor-box',
 	templateUrl: 'editor-box.pug',

src/ts/components/app/help/help.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { emojis } from '../../../common/emoji';
 import { faArrowLeft, faArrowRight, faArrowUp, faArrowDown } from '../../../client/icons';
 import { contactEmail, contactDiscord } from '../../../client/data';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'help',
 	templateUrl: 'help.pug',

src/ts/components/app/home/home.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Model, getPonyTag } from '../../services/model';
 import { defaultPonyState } from '../../../common/ponyHelpers';
 import { GameService } from '../../services/gameService';
@@ -6,6 +6,7 @@ import { OAuthProvider, PonyObject } from '../../../common/interfaces';
 import { stand } from '../../../common/ponyAnimations';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'home',
 	templateUrl: 'home.pug',