Update to angular 22

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package.json

@@ -44,22 +44,22 @@
     "update-fontawesome": "npm update @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome --save"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "21.2.19",
-    "@angular/animations": "21.2.19",
-    "@angular/common": "21.2.19",
-    "@angular/compiler": "21.2.19",
-    "@angular/compiler-cli": "21.2.19",
-    "@angular/core": "21.2.19",
-    "@angular/forms": "21.2.19",
-    "@angular/platform-browser": "21.2.19",
-    "@angular/platform-browser-dynamic": "21.2.19",
-    "@angular/platform-server": "21.2.19",
-    "@angular/router": "21.2.19",
-    "@fortawesome/angular-fontawesome": "4.0.0",
+    "@angular-devkit/build-angular": "22.1.2",
+    "@angular/animations": "22.1.0",
+    "@angular/common": "22.1.0",
+    "@angular/compiler": "22.1.0",
+    "@angular/compiler-cli": "22.1.0",
+    "@angular/core": "22.1.0",
+    "@angular/forms": "22.1.0",
+    "@angular/platform-browser": "22.1.0",
+    "@angular/platform-browser-dynamic": "22.1.0",
+    "@angular/platform-server": "22.1.0",
+    "@angular/router": "22.1.0",
+    "@fortawesome/angular-fontawesome": "5.1.0",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@ngtools/webpack": "21.2.19",
+    "@ngtools/webpack": "22.1.2",
     "@types/bluebird": "3.5.42",
     "@types/body-parser": "1.19.6",
     "@types/chai": "5.2.3",
@@ -132,7 +132,7 @@
     "ts-node": "10.9.2",
     "tslib": "2.8.1",
     "tsutils": "3.17.1",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "webpack": "5.105.4",
     "webpack-bundle-analyzer": "5.2.0",
     "webpack-cli": "7.0.2",
@@ -143,7 +143,7 @@
     "zone.js": "0.15.1"
   },
   "dependencies": {
-    "@angular/cdk": "21.2.14",
+    "@angular/cdk": "22.1.0",
     "@encharm/cws": "4.5.3",
     "@passport-next/passport-facebook": "^3.1.3",
     "@passport-next/passport-google-oauth2": "^1.0.0",

src/ts/components/admin/admin-account-details/admin-account-details.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { remove, uniq } from 'lodash';
 import {
@@ -23,6 +23,7 @@ const defaultDuplicatesLimit = 10;
 const year = (new Date()).getFullYear();
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-account-details',
 	templateUrl: 'admin-account-details.pug',

src/ts/components/admin/admin-accounts/admin-accounts.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { Router } from '@angular/router';
 import { debounce } from 'lodash';
 import { Account } from '../../../common/adminInterfaces';
@@ -12,6 +12,7 @@ let currentPage = 0;
 let not = false;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-accounts',
 	templateUrl: 'admin-accounts.pug',

src/ts/components/admin/admin-events/admin-events.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { fromNow } from '../../../common/utils';
 import { Event, ChatEvent } from '../../../common/adminInterfaces';
 import { AdminModel } from '../../services/adminModel';
@@ -11,6 +11,7 @@ import {
 let state: BaseTableState;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-events',
 	templateUrl: 'admin-events.pug',

src/ts/components/admin/admin-origin-details/admin-origin-details.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Event } from '../../../common/adminInterfaces';
 import { AdminModel } from '../../services/adminModel';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-origin-details',
 	templateUrl: 'admin-origin-details.pug',

src/ts/components/admin/admin-origins/admin-origins.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { RequestStats, OriginStats, OtherStats } from '../../../common/adminInterfaces';
 import { faSync, faEraser, faClock, faUser, faChevronDown, faSpinner } from '../../../client/icons';
 import { AdminModel } from '../../services/adminModel';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-origins',
 	templateUrl: 'admin-origins.pug',

src/ts/components/admin/admin-other/admin-other.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { compact } from 'lodash';
 import { AdminModel } from '../../services/adminModel';
 import { Account, GeneralSettings } from '../../../common/adminInterfaces';
@@ -12,6 +12,7 @@ interface Field {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-other',
 	templateUrl: 'admin-other.pug',

src/ts/components/admin/admin-ponies/admin-ponies.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { isEqual, debounce } from 'lodash';
 import { Character, FindPonyQuery } from '../../../common/adminInterfaces';
 import { AdminModel } from '../../services/adminModel';
@@ -9,6 +9,7 @@ let currentPage = 1;
 let query: FindPonyQuery = {};
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-ponies',
 	templateUrl: 'admin-ponies.pug',

src/ts/components/admin/admin-reports/admin-reports-perf/admin-reports-perf.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef } from '@angular/core';
+import { Component, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import { AdminModel } from '../../../services/adminModel';
 import { TimingEntry, TimingEntryType, WorldPerfStats, defaultWorldPerfStats } from '../../../../common/adminInterfaces';
 import { findById, pointInRect, clamp } from '../../../../common/utils';
@@ -26,6 +26,7 @@ const frameTime = 1000 / SERVER_FPS;
 const timePadding = 10; // ms
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-reports-perf',
 	templateUrl: 'admin-reports-perf.pug',

src/ts/components/admin/admin-reports/admin-reports.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-reports',
 	templateUrl: 'admin-reports.pug',

src/ts/components/admin/admin-sign-in/admin-sign-in.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-sign-in',
 	templateUrl: 'admin-sign-in.pug',

src/ts/components/admin/admin-state/admin-state.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import {
 	GameServerState, SERVER_SETTINGS, LOGIN_SERVER_SETTINGS, ServerStats, RequestStats,
 	UserCountStats, Stats, StatsTable
@@ -8,6 +8,7 @@ import { AdminModel } from '../../services/adminModel';
 import { faCog, faSlidersH } from '../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-state',
 	templateUrl: 'admin-state.pug',

src/ts/components/admin/admin.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, provideZoneChangeDetection } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -131,6 +131,7 @@ export const routes: Routes = [
 		AdminApp,
 	],
 	providers: [
+		provideZoneChangeDetection(),
 		ErrorReporter,
 	],
 	bootstrap: [AdminApp],

src/ts/components/admin/admin.ts

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

src/ts/components/admin/shared/account-info-remote/account-info-remote.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Account } from '../../../../common/adminInterfaces';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'account-info-remote',
 	templateUrl: 'account-info-remote.pug',

src/ts/components/admin/shared/account-info/account-info.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, OnInit, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { compact } from 'lodash';
 import { DAY, MINUTE, HOUR } from '../../../../common/constants';
@@ -56,6 +56,7 @@ const alertExpires = [
 ];
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'account-info',
 	templateUrl: 'account-info.pug',

src/ts/components/admin/shared/account-status/account-status.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { AdminModel } from '../../../services/adminModel';
 import { Account, AccountStatus as IAccountStatus } from '../../../../common/adminInterfaces';
 import { faUserSecret } from '../../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'account-status',
 	templateUrl: 'account-status.pug',

src/ts/components/admin/shared/account-tooltip/account-tooltip.ts

@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Account } from '../../../../common/adminInterfaces';
 import { getAge } from '../../../../common/adminUtils';
 
 const year = (new Date()).getFullYear();
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'account-tooltip',
 	templateUrl: 'account-tooltip.pug',

src/ts/components/admin/shared/admin-chat-log/admin-chat-log.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, ElementRef } from '@angular/core';
+import { Component, Input, OnDestroy, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import { AdminModel } from '../../../services/adminModel';
 import { Account } from '../../../../common/adminInterfaces';
 import { ChatDate, createChatDate, createDateRange } from '../../../../common/adminUtils';
@@ -9,6 +9,7 @@ import { replaceSwears } from '../../../../client/adminHtmlUtils';
 import { addDays } from 'date-fns';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'admin-chat-log',
 	templateUrl: 'admin-chat-log.pug',

src/ts/components/admin/shared/auth-info-edit/auth-info-edit.ts

@@ -1,10 +1,11 @@
-import { Component, OnDestroy, Input } from '@angular/core';
+import { Component, OnDestroy, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Auth, DuplicateResult } from '../../../../common/adminInterfaces';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { faInfo, faLock, faTrash, faEyeSlash, faArrowRight } from '../../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'auth-info-edit',
 	templateUrl: 'auth-info-edit.pug',

src/ts/components/admin/shared/auth-info-remote/auth-info-remote.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { Auth } from '../../../../common/adminInterfaces';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'auth-info-remote',
 	templateUrl: 'auth-info-remote.pug',

src/ts/components/admin/shared/auth-info/auth-info.ts

@@ -1,8 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Auth } from '../../../../common/adminInterfaces';
 import { oauthIcons, faGlobe } from '../../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'auth-info',
 	templateUrl: 'auth-info.pug',

src/ts/components/admin/shared/auth-list-remote/auth-list-remote.ts

@@ -1,8 +1,9 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'auth-list-remote',
 	templateUrl: 'auth-list-remote.pug',

src/ts/components/admin/shared/auth-list/auth-list.ts

@@ -1,7 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Auth } from '../../../../common/adminInterfaces';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'auth-list',
 	templateUrl: 'auth-list.pug',

src/ts/components/admin/shared/email-list/email-list.ts

@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'email-list',
 	templateUrl: 'email-list.pug',

src/ts/components/admin/shared/events-table/events-table.ts

@@ -1,10 +1,11 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { Account, Event, SERVER_LABELS, ChatEvent } from '../../../../common/adminInterfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { faLanguage, faTrash, faComment, faClipboard } from '../../../../client/icons';
 import { getTranslationUrl } from '../../../../common/adminUtils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'events-table',
 	templateUrl: 'events-table.pug',

src/ts/components/admin/shared/origin-info-remote/origin-info-remote.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { Origin } from '../../../../common/adminInterfaces';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'origin-info-remote',
 	templateUrl: 'origin-info-remote.pug',

src/ts/components/admin/shared/origin-info/origin-info.ts

@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Origin, BannedMuted } from '../../../../common/adminInterfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { countryCodeToName } from '../../../../common/countries';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'origin-info',
 	templateUrl: 'origin-info.pug',

src/ts/components/admin/shared/origin-list-remote/origin-list-remote.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { OriginInfoBase } from '../../../../common/adminInterfaces';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'origin-list-remote',
 	templateUrl: 'origin-list-remote.pug',

src/ts/components/admin/shared/pony-info-remote/pony-info-remote.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { Character } from '../../../../common/adminInterfaces';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'pony-info-remote',
 	templateUrl: 'pony-info-remote.pug',

src/ts/components/admin/shared/pony-info/pony-info.ts

@@ -1,10 +1,11 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { hasFlag } from '../../../../common/utils';
 import { Character, CharacterFlags } from '../../../../common/adminInterfaces';
 import { isForbiddenName } from '../../../../common/security';
 import { AdminModel } from '../../../services/adminModel';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'pony-info',
 	templateUrl: 'pony-info.pug',

src/ts/components/admin/shared/pony-list-remote/pony-list-remote.ts

@@ -1,10 +1,11 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 import { faTrash, faArrowRight } from '../../../../client/icons';
 import { Character, PonyIdDateName, DuplicateResult } from '../../../../common/adminInterfaces';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'pony-list-remote',
 	templateUrl: 'pony-list-remote.pug',

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',

src/ts/components/services/rollbarErrorHandler.ts

@@ -1,5 +1,5 @@
 import { ErrorHandler, Injectable, Injector, InjectionToken } from '@angular/core';
-import * as Rollbar from 'rollbar';
+import Rollbar from 'rollbar';
 import { version } from '../../client/data';
 import { HASH } from '../../generated/hash';
 import { ROLLBAR_ENV, ROLLBAR_TOKEN } from '../../generated/rollbarConfig';

src/ts/components/services/rollbarErrorReporter.ts

@@ -1,5 +1,5 @@
 import { Injectable, Inject } from '@angular/core';
-import * as Rollbar from 'rollbar';
+import Rollbar from 'rollbar';
 import { Person, rollbarCheckIgnore, isIgnoredError } from '../../common/rollbar';
 import { RollbarService } from './rollbarErrorHandler';
 import { ErrorReporter } from './errorReporter';

src/ts/components/shared/action-bar/action-bar.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, ElementRef, TemplateRef } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { ButtonAction } from '../../../common/interfaces';
 import { PonyTownGame } from '../../../client/game';
@@ -10,6 +10,7 @@ import { last } from '../../../common/utils';
 import { faCog } from '../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'action-bar',
 	templateUrl: 'action-bar.pug',

src/ts/components/shared/actions-modal/actions-modal.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import {
 	createButtionActionActions, expressionButtonAction, createButtonCommandActions,
@@ -23,6 +23,7 @@ function eyeSprite(e: PonyEye | undefined) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'actions-modal',
 	templateUrl: 'actions-modal.pug',

src/ts/components/shared/bitmap-box/bitmap-box.ts

@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
 import { parseColor, colorToCSS } from '../../../common/color';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'bitmap-box',
 	templateUrl: 'bitmap-box.pug',

src/ts/components/shared/butt-mark-editor/butt-mark-editor.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { fill } from 'lodash';
 import { PonyInfo } from '../../../common/interfaces';
 import { CM_SIZE } from '../../../common/constants';
@@ -10,6 +10,7 @@ export interface ButtMarkEditorState {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'butt-mark-editor',
 	templateUrl: 'butt-mark-editor.pug',

src/ts/components/shared/character-list/character-list.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, ViewChild, ElementRef, OnInit, Input, NgZone } from '@angular/core';
+import { Component, Output, EventEmitter, ViewChild, ElementRef, OnInit, Input, NgZone, ChangeDetectionStrategy } from '@angular/core';
 import { uniq } from 'lodash';
 import { Key } from '../../../client/input/input';
 import { PonyObject } from '../../../common/interfaces';
@@ -43,6 +43,7 @@ function comparePonies(a: PonyObject, b: PonyObject) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'character-list',
 	templateUrl: 'character-list.pug',

src/ts/components/shared/character-preview/character-preview.ts

@@ -1,6 +1,5 @@
 import {
-	Component, Input, ElementRef, AfterViewInit, OnDestroy, NgZone, ViewChild, OnChanges, HostListener
-} from '@angular/core';
+	Component, Input, ElementRef, AfterViewInit, OnDestroy, NgZone, ViewChild, OnChanges, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import { PonyInfo, PonyState } from '../../../common/interfaces';
 import { toPalette } from '../../../common/ponyInfo';
 import { GRASS_COLOR, TRANSPARENT } from '../../../common/colors';
@@ -21,6 +20,7 @@ const DEFAULT_STATE = defaultPonyState();
 const DEFAULT_OPTIONS = defaultDrawPonyOptions();
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'character-preview',
 	template: '<canvas class="rounded" #canvas></canvas>',

src/ts/components/shared/character-select/character-select.ts

@@ -1,4 +1,4 @@
-import { Component, Input, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, EventEmitter, Output, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import { Router } from '@angular/router';
 import { PonyObject } from '../../../common/interfaces';
 import { PLAYER_NAME_MAX_LENGTH } from '../../../common/constants';
@@ -12,6 +12,7 @@ import { delay } from '../../../common/utils';
 import { isMobile } from '../../../client/data';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'character-select',
 	templateUrl: 'character-select.pug',

src/ts/components/shared/chat-box/chat-box.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, NgZone, AfterViewInit, ViewChild, OnDestroy, Input } from '@angular/core';
+import { Component, ElementRef, NgZone, AfterViewInit, ViewChild, OnDestroy, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ChatType, isPartyChat, Entity, FakeEntity } from '../../../common/interfaces';
 import { SAY_MAX_LENGTH } from '../../../common/constants';
@@ -39,6 +39,7 @@ function isActionCommand(message: string) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'chat-box',
 	templateUrl: 'chat-box.pug',

src/ts/components/shared/chat-log/chat-log.ts

@@ -1,6 +1,5 @@
 import {
-	Component, ViewChild, ElementRef, NgZone, AfterViewInit, OnDestroy, HostListener, Output, EventEmitter, DoCheck
-} from '@angular/core';
+	Component, ViewChild, ElementRef, NgZone, AfterViewInit, OnDestroy, HostListener, Output, EventEmitter, DoCheck, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { clamp, escapeRegExp } from 'lodash';
 import { PonyTownGame } from '../../../client/game';
@@ -208,6 +207,7 @@ function findUserIndex(users: IndexEntryUser[], id: number, crc: number | undefi
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'chat-log',
 	templateUrl: 'chat-log.pug',

src/ts/components/shared/color-picker/color-picker.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { clamp } from '../../../common/utils';
 import { parseColorFast, colorToCSS, colorFromHSVA, colorToHSVA, colorToHexRGB } from '../../../common/color';
 import { AgDragEvent } from '../directives/agDrag';
@@ -7,6 +7,7 @@ import { faChevronDown } from '../../../client/icons';
 const SIZE = 175;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'color-picker',
 	templateUrl: 'color-picker.pug',

src/ts/components/shared/date-picker/date-picker.ts

@@ -1,9 +1,10 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { times, formatISODate, parseISODate, createValidBirthDate } from '../../../common/utils';
 import { MONTH_NAMES_EN } from '../../../common/constants';
 import { getLocale } from '../../../client/clientUtils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'date-picker',
 	templateUrl: 'date-picker.pug',

src/ts/components/shared/directives/draggable.ts

@@ -1,4 +1,4 @@
-import { Component, Directive, Input, Output, EventEmitter, ElementRef, OnInit, Injectable, OnDestroy } from '@angular/core';
+import { Component, Directive, Input, Output, EventEmitter, ElementRef, OnInit, Injectable, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { noop } from 'lodash';
 import { AgDragEvent, handleDrag } from './agDrag';
 import { clamp, setTransform, removeItem, pointInRect } from '../../../common/utils';
@@ -76,6 +76,7 @@ export class DraggableService {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'draggable-outlet',
 	template: `<div></div>`,

src/ts/components/shared/directives/dropdown.ts

@@ -1,7 +1,6 @@
 import {
 	Directive, HostListener, Input, Output, EventEmitter, TemplateRef, ViewContainerRef, ContentChild,
-	Renderer2, ElementRef, EmbeddedViewRef, Component, Injectable
-} from '@angular/core';
+	Renderer2, ElementRef, EmbeddedViewRef, Component, Injectable, ChangeDetectionStrategy } from '@angular/core';
 import { uniqueId } from 'lodash';
 import { focusFirstElement } from '../../../client/htmlUtils';
 
@@ -12,6 +11,7 @@ export class DropdownOutletService {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'dropdown-outlet',
 	template: `<ng-template></ng-template>`,

src/ts/components/shared/discord-button/discord-button.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { discordLink } from '../../../client/data';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'discord-button',
 	templateUrl: 'discord-button.pug',

src/ts/components/shared/discord-pony/discord-pony.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { defaultExpression } from '../../../common/ponyUtils';
 import { defaultPonyState } from '../../../common/ponyHelpers';
 import { DISCORD_PONY } from '../../../common/constants';
@@ -25,6 +25,7 @@ const DERP: Expression = {
 };
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'discord-pony',
 	templateUrl: 'discord-pony.pug',

src/ts/components/shared/fill-outline/fill-outline.ts

@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { faLock } from '../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'fill-outline',
 	templateUrl: 'fill-outline.pug',

src/ts/components/shared/friends-box/friends-box.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { faCog, faUserFriends, faUserPlus, faUserCog, faCircle } from '../../../client/icons';
 import { Model, Friend } from '../../services/model';
 import { PonyTownGame } from '../../../client/game';
@@ -7,6 +7,7 @@ import { removeItem } from '../../../common/utils';
 import { SettingsService } from '../../services/settingsService';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'friends-box',
 	templateUrl: 'friends-box.pug',

src/ts/components/shared/install-button/install-button.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { faTimes } from '../../../client/icons';
 import { InstallService } from '../../services/installService';
 import { isMobile } from '../../../client/data';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'install-button',
 	templateUrl: 'install-button.pug',

src/ts/components/shared/invites-modal/invites-modal.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { toPalette } from '../../../common/ponyInfo';
 import { decompressPonyString } from '../../../common/compressPony';
 import { PonyTownGame } from '../../../client/game';
@@ -7,6 +7,7 @@ import { removeItem } from '../../../common/utils';
 import { Model } from '../../services/model';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'invites-modal',
 	templateUrl: 'invites-modal.pug',

src/ts/components/shared/kbd-key/kbd-key.ts

@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'kbd-key',
 	templateUrl: 'kbd-key.pug',

src/ts/components/shared/menu-bar/menu-bar.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import { AccountData, OAuthProvider } from '../../../common/interfaces';
 import { signUpProviders, signInProviders } from '../../../client/data';
 import { getProviderIcon } from '../sign-in-box/sign-in-box';
@@ -9,6 +9,7 @@ import { SettingsService } from '../../services/settingsService';
 import { REQUEST_DATE_OF_BIRTH } from '../../../common/constants';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'menu-bar',
 	templateUrl: 'menu-bar.pug',

src/ts/components/shared/menu-item/menu-item.ts

@@ -1,7 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { emptyIcon } from '../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'menu-item',
 	templateUrl: 'menu-item.pug',

src/ts/components/shared/mod-box/mod-box.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { ModAction, Pony } from '../../../common/interfaces';
 import { TIMEOUTS } from '../../../common/constants';
 import { Model } from '../../services/model';
@@ -9,6 +9,7 @@ const ageLabels = ['', 'M', 'A', '', '', '[M]', '[A]'];
 const ageTitles = ['Not set', 'Minor', 'Adult', '', '', 'Minor (locked)', 'Adult (locked)'];
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'mod-box',
 	templateUrl: 'mod-box.pug',

src/ts/components/shared/notification/notification-item.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { PlayerAction, Notification, NotificationFlags, EntityPlayerState } from '../../../common/interfaces';
 import { PonyTownGame } from '../../../client/game';
 import { hasFlag, setFlag } from '../../../common/utils';
@@ -6,6 +6,7 @@ import { faBan } from '../../../client/icons';
 import { getPaletteInfo } from '../../../client/pony';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'notification-item',
 	templateUrl: 'notification-item.pug',

src/ts/components/shared/notification/notification-list.ts

@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Notification } from '../../../common/interfaces';
 import { faEllipsisV } from '../../../client/icons';
 
 const LIMIT = 8;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'notification-list',
 	templateUrl: 'notification-list.pug',

src/ts/components/shared/page-loader/page-loader.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { faSpinner } from '../../../client/icons';
 import { Model } from '../../services/model';
 import { hardReload } from '../../../client/clientUtils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'page-loader',
 	templateUrl: 'page-loader.pug',

src/ts/components/shared/party-box/party-box.ts

@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { PartyMember } from '../../../common/interfaces';
 import { PonyTownGame } from '../../../client/game';
 import { partyLeaderIcon, offlineIcon } from '../../../client/icons';
 import { getPaletteInfo } from '../../../client/pony';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'party-box',
 	templateUrl: 'party-box.pug',

src/ts/components/shared/party-list/party-list.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit, OnDestroy } from '@angular/core';
+import { Component, HostListener, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { PartyMember } from '../../../common/interfaces';
 import { PARTY_LIMIT } from '../../../common/constants';
@@ -12,6 +12,7 @@ function visibleMembers(members: PartyMember[], max: number, start: number) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'party-list',
 	templateUrl: 'party-list.pug',

src/ts/components/shared/play-box/play-box.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { ServerInfo, AccountDataFlags } from '../../../common/interfaces';
 import { RequestError, delay, includes, hasFlag } from '../../../common/utils';
 import {
@@ -29,6 +29,7 @@ const ignoredErrors = [
 ];
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'play-box',
 	templateUrl: 'play-box.pug',

src/ts/components/shared/play-notice/play-notice.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { discordLink } from '../../../client/data';
 import { GENERAL_RULES } from '../../../common/constants';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'play-notice',
 	templateUrl: 'play-notice.pug',

src/ts/components/shared/pony-box/pony-box.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { PlayerAction, Pony, EntityPlayerState, Entity } from '../../../common/interfaces';
 import { getPaletteInfo } from '../../../client/pony';
 import { Model } from '../../services/model';
@@ -14,6 +14,7 @@ import { isIgnored, isHidden, isFriend } from '../../../common/entityUtils';
 import { setFlag } from '../../../common/utils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'pony-box',
 	templateUrl: 'pony-box.pug',

src/ts/components/shared/scale-picker/scale-picker.ts

@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { times } from 'lodash';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'scale-picker',
 	templateUrl: 'scale-picker.pug',

src/ts/components/shared/set-selection/set-selection.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, OnChanges, Directive, Optional } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, Directive, Optional, ChangeDetectionStrategy } from '@angular/core';
 import { clamp } from 'lodash';
 import { SpriteSet, ColorExtraSets, ColorExtraSet } from '../../../common/interfaces';
 import { getColorCount } from '../../../common/spriteUtils';
@@ -15,6 +15,7 @@ export class SetOutlineHidden {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'set-selection',
 	templateUrl: 'set-selection.pug',

src/ts/components/shared/settings-box/settings-box.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, NgZone, ViewChild, TemplateRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, NgZone, ViewChild, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
@@ -14,6 +14,7 @@ import { SettingsService } from '../../services/settingsService';
 import { Audio } from '../../services/audio';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'settings-box',
 	templateUrl: 'settings-box.pug',

src/ts/components/shared/settings-modal/settings-modal.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { AccountSettings, BrowserSettings, GraphicsQuality } from '../../../common/interfaces';
 import { SettingsService } from '../../services/settingsService';
@@ -13,6 +13,7 @@ import { faSlidersH, faCommentSlash, faGamepad, faImage, faDownload, faUpload, f
 import { saveAs } from 'file-saver';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'settings-modal',
 	templateUrl: 'settings-modal.pug',

src/ts/components/shared/sign-in-box/sign-in-box.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { signUpProviders, signInProviders, local } from '../../../client/data';
 import { emptyIcon, oauthIcons } from '../../../client/icons';
 import { OAuthProvider } from '../../../common/interfaces';
@@ -11,6 +11,7 @@ export function getProviderIcon(id: string) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'sign-in-box',
 	templateUrl: 'sign-in-box.pug',

src/ts/components/shared/sprite-box/sprite-box.ts

@@ -1,6 +1,5 @@
 import {
-	Component, Input, AfterViewInit, ViewChild, ElementRef, NgZone, DoCheck, IterableDiffers, IterableDiffer, OnChanges
-} from '@angular/core';
+	Component, Input, AfterViewInit, ViewChild, ElementRef, NgZone, DoCheck, IterableDiffers, IterableDiffer, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { Rect, Sprite, ColorExtra, Palette } from '../../../common/interfaces';
 import { parseColor, colorToCSS } from '../../../common/color';
 import { mockPaletteManager, toColorList, getColorsFromSet } from '../../../common/ponyInfo';
@@ -22,6 +21,7 @@ function drawAll() {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'sprite-box',
 	templateUrl: 'sprite-box.pug',

src/ts/components/shared/sprite-selection/sprite-selection.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import { uniqueId } from 'lodash';
 import { ColorExtra } from '../../../common/interfaces';
 import { Key } from '../../../client/input/input';
@@ -7,6 +7,7 @@ import { focusElementAfterTimeout } from '../../../client/htmlUtils';
 const MAX = 999999;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'sprite-selection',
 	templateUrl: 'sprite-selection.pug',

src/ts/components/shared/swap-box/swap-box.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, ViewChild } from '@angular/core';
+import { Component, NgZone, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { PonyTownGame } from '../../../client/game';
 import { PonyObject, Action } from '../../../common/interfaces';
 import { Dropdown } from '../directives/dropdown';
@@ -8,6 +8,7 @@ import { Model } from '../../services/model';
 // import { SWAP_TIMEOUT, SECOND } from '../../../common/constants';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'swap-box',
 	templateUrl: 'swap-box.pug',

src/ts/components/shared/tabset/tabset.ts

@@ -1,6 +1,5 @@
 import {
-	Component, Directive, TemplateRef, Input, ContentChild, ContentChildren, QueryList, Output, EventEmitter
-} from '@angular/core';
+	Component, Directive, TemplateRef, Input, ContentChild, ContentChildren, QueryList, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { uniqueId } from 'lodash';
 import { Key } from '../../../client/input/input';
 
@@ -36,6 +35,7 @@ export class Tab {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tabset',
 	templateUrl: 'tabset.pug',

src/ts/components/shared/virtual-list/virtual-list.ts

@@ -1,7 +1,6 @@
 import {
 	Directive, DoCheck, Input, ViewContainerRef, TemplateRef, IterableDiffers, IterableDiffer,
-	EmbeddedViewRef, Component, ElementRef, ViewChild, NgZone, OnDestroy, ChangeDetectorRef, AfterViewInit
-} from '@angular/core';
+	EmbeddedViewRef, Component, ElementRef, ViewChild, NgZone, OnDestroy, ChangeDetectorRef, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
 
 interface Context<T> {
 	$implicit: T;
@@ -11,6 +10,7 @@ interface Context<T> {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'virtual-list',
 	template: '<div #padStart></div><ng-content></ng-content><div #padEnd></div>',

src/ts/components/shared/visit-pt-button/visit-pt-button.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'visit-pt-button',
 	templateUrl: 'visit-pt-button.pug',

src/ts/components/shared/visit-pt-pony/visit-pt-pony.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { defaultExpression } from '../../../common/ponyUtils';
 import { defaultPonyState } from '../../../common/ponyHelpers';
 import { Expression, Muzzle, HeadAnimation, BodyAnimation, Eye } from '../../../common/interfaces';
@@ -24,6 +24,7 @@ const EXCITED: Expression = {
 const MENO = 'DBWIzP8imd08//D19fVazSjcwf1GhLNEiMxENSovLy/NsIdJQDnGqYBiSztWQTM6LychEnE/KRX///9WPeE1HbSpBUEIIASwgEIAAAAAbIAgCFMY34AHAAjwgCMRQCVLY38IDhAAwmFBz4fAIxjKM6SjGlaxjWtYgjGI';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'visit-pt-pony',
 	templateUrl: 'visit-pt-pony.pug',

src/ts/components/tools/shared/tools-frame/tools-frame.ts

@@ -1,9 +1,10 @@
-import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import { Sprite, PonyInfo } from '../../../../common/interfaces';
 
 let openedPopover: ToolsFrame;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-frame',
 	templateUrl: 'tools-frame.pug',

src/ts/components/tools/shared/tools-offset/tools-offset.ts

@@ -1,8 +1,9 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { Point } from '../../../../common/interfaces';
 import { faChevronRight, faChevronLeft, faChevronDown, faChevronUp } from '../../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-offset',
 	templateUrl: 'tools-offset.pug',

src/ts/components/tools/tools-animation/tools-animation.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit, OnDestroy } from '@angular/core';
+import { Component, HostListener, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { flatMap, dropRightWhile, compact } from 'lodash';
@@ -87,6 +87,7 @@ function eyeSprite(e: PonyEye | undefined) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-animation',
 	templateUrl: 'tools-animation.pug',

src/ts/components/tools/tools-chat/tools-chat.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
 import {
 	drawSpeechBaloon, drawNamePlate, createCommonPalettes, drawBaloon, DrawNameFlags
 } from '../../../graphics/graphicsUtils';
@@ -25,6 +25,7 @@ interface Message {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-chat',
 	templateUrl: 'tools-chat.pug',

src/ts/components/tools/tools-collisions/tools-collisions.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { Component, ViewChild, ElementRef, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { AgDragEvent } from '../../shared/directives/agDrag';
 import { Rect, Point } from '../../../common/interfaces';
 import { roundPosition } from '../../../common/positionUtils';
@@ -38,6 +38,7 @@ function toScreen(pt: Point) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-collisions',
 	templateUrl: 'tools-collisions.pug',

src/ts/components/tools/tools-entity/tools-entity.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, HostListener, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, HostListener, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { findLastIndex, compact } from 'lodash';
 import { removeItem, containsPoint, isKeyEventInvalid, cloneDeep, att } from '../../../common/utils';
 import * as sprites from '../../../generated/sprites';
@@ -81,6 +81,7 @@ interface EntityData {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-entity',
 	templateUrl: 'tools-entity.pug',

src/ts/components/tools/tools-expressions/tools-expressions.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { PonyInfo, PonyState } from '../../../common/interfaces';
 import { toPalette, createDefaultPony, syncLockedPonyInfo } from '../../../common/ponyInfo';
 import { defaultPonyState, defaultDrawPonyOptions } from '../../../common/ponyHelpers';
@@ -13,6 +13,7 @@ import { paletteSpriteSheet } from '../../../generated/sprites';
 import { loadAndInitSpriteSheets } from '../../../client/loadSprites';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-expressions',
 	templateUrl: 'tools-expressions.pug',

src/ts/components/tools/tools-index/tools-index.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-index',
 	templateUrl: 'tools-index.pug',

src/ts/components/tools/tools-map/tools-map.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { saveCanvas, disableImageSmoothing, createCanvas } from '../../../common/canvasUtils';
 import { tileHeight, tileWidth, REGION_SIZE } from '../../../common/constants';
@@ -42,6 +42,7 @@ export interface ToolsMapInfo {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-map',
 	templateUrl: 'tools-map.pug',

src/ts/components/tools/tools-palette/tools-palette.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import * as sprites from '../../../generated/sprites';
 import { setPaletteManager } from '../../../common/mixins';
 import { parseColor, colorToCSS } from '../../../common/color';
@@ -16,6 +16,7 @@ const paletteManager = new PaletteManager();
 const defaultPalette = paletteManager.add(DEFAULT_PALETTE);
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-palette',
 	templateUrl: 'tools-palette.pug',

src/ts/components/tools/tools-perf/tools-perf.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone } from '@angular/core';
+import { Component, NgZone, ChangeDetectionStrategy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { isEqual, range, random, times } from 'lodash';
 import { parseColorWithAlpha, parseColorFast, colorToHexRGB } from '../../../common/color';
@@ -13,6 +13,7 @@ import { includes as utilsIncludes } from '../../../common/utils';
 import { encodeString, encodeStringNew } from './methods';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-perf',
 	templateUrl: 'tools-perf.pug',

src/ts/components/tools/tools-regions/tools-regions.ts

@@ -1,5 +1,5 @@
 import { times, fill, clamp } from 'lodash';
-import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
+import { Component, OnInit, HostListener, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { rect } from '../../../common/rect';
 import { AgDragEvent } from '../../shared/directives/agDrag';
 import { updateCamera, centerCameraOn, isAreaVisible, createCamera } from '../../../common/camera';
@@ -24,6 +24,7 @@ export function getRegionsBoundsCameraBased(_entity: Point, camera: Rect, region
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-regions',
 	templateUrl: 'tools-regions.pug',

src/ts/components/tools/tools-sheet/tools-sheet.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { compact } from 'lodash';
 import { getCols, getRows, createPsd, savePsd, drawPsd } from '../sheetExport';
 import { saveCanvas } from '../../../common/canvasUtils';
@@ -9,6 +9,7 @@ import { sheets, Sheet } from '../../../common/sheets';
 import { loadAndInitSpriteSheets } from '../../../client/loadSprites';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tools-sheet',
 	templateUrl: 'tools-sheet.pug',