Update to angular 19

gulpfile.mjs

@@ -334,11 +334,11 @@ if (argv.main) {
 }
 
 if (argv.beta) {
-	webpackArgs.push('--env.beta');
+	webpackArgs.push('--env', 'beta');
 }
 
 if (argv.timing) {
-	webpackArgs.push('--env.timing');
+	webpackArgs.push('--env', 'timing');
 }
 
 const webpackProd = npmScript(webpackScript, webpackArgs);

package.json

@@ -18,11 +18,11 @@
     "ts-cov": "npm run ts -- --target es5",
     "ts-cov-watch": "npm run ts -- --target es5 --watch",
     "webpack-prod": "node --max_old_space_size=8192 node_modules/webpack-cli/bin/cli --config webpack.prod.mjs --progress --color",
-    "webpack-main": "npm run webpack-prod -- --env.main",
+    "webpack-main": "npm run webpack-prod -- --env main",
-    "webpack-analyze": "npm run webpack-prod -- --env.analyze",
+    "webpack-analyze": "npm run webpack-prod -- --env analyze",
-    "webpack-debug": "npm run webpack-prod -- --env.debug",
+    "webpack-debug": "npm run webpack-prod -- --env debug",
-    "webpack-admin": "npm run webpack-prod -- --env.admin",
+    "webpack-admin": "npm run webpack-prod -- --env admin",
-    "webpack-stats": "npm run webpack-prod -- --env.debug --json > stats.json",
+    "webpack-stats": "npm run webpack-prod -- --env debug --json > stats.json",
     "webpack-verbose": "npm run webpack-prod -- --verbose",
     "wds": "webpack-dev-server --config webpack.dev.mjs --progress --color --port 8091",
     "build": "gulp build",
@@ -44,23 +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": "18.2.21",
+    "@angular-devkit/build-angular": "19.2.27",
-    "@angular/animations": "18.2.14",
+    "@angular/animations": "19.2.25",
-    "@angular/cdk": "18.2.14",
+    "@angular/common": "19.2.25",
-    "@angular/common": "18.2.14",
+    "@angular/compiler": "19.2.25",
-    "@angular/compiler": "18.2.14",
+    "@angular/compiler-cli": "19.2.25",
-    "@angular/compiler-cli": "18.2.14",
+    "@angular/core": "19.2.25",
-    "@angular/core": "18.2.14",
+    "@angular/forms": "19.2.25",
-    "@angular/forms": "18.2.14",
+    "@angular/platform-browser": "19.2.25",
-    "@angular/platform-browser": "18.2.14",
+    "@angular/platform-browser-dynamic": "19.2.25",
-    "@angular/platform-browser-dynamic": "18.2.14",
+    "@angular/platform-server": "19.2.25",
-    "@angular/platform-server": "18.2.14",
+    "@angular/router": "19.2.25",
-    "@angular/router": "18.2.14",
+    "@fortawesome/angular-fontawesome": "1.0.0",
-    "@ngtools/webpack": "18.0.0",
-    "@fortawesome/angular-fontawesome": "0.15.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": "19.2.27",
     "@types/bluebird": "3.5.42",
     "@types/body-parser": "1.19.6",
     "@types/chai": "5.2.3",
@@ -122,10 +121,10 @@
     "howler": "2.1.2",
     "html-loader": "5.1.0",
     "html5-gamepad": "1.1.0",
-    "mocha": "6.2.0",
     "merge2": "1.2.4",
-    "remap-istanbul": "^0.13.0",
+    "mocha": "6.2.0",
     "reflect-metadata": "0.2.2",
+    "remap-istanbul": "^0.13.0",
     "rxjs": "7.8.2",
     "sass-loader": "13.3.3",
     "sinon": "21.0.3",
@@ -133,7 +132,7 @@
     "ts-node": "10.9.2",
     "tslib": "2.8.1",
     "tsutils": "3.17.1",
-    "typescript": "5.4",
+    "typescript": "5.7.3",
     "webpack": "5.105.4",
     "webpack-bundle-analyzer": "5.2.0",
     "webpack-cli": "7.0.2",
@@ -141,10 +140,13 @@
     "webpack-merge": "6.0.1",
     "workbox-cli": "7.4.0",
     "wrapper-webpack-plugin": "2.2.2",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.1"
   },
   "dependencies": {
+    "@angular/cdk": "19.2.19",
     "@encharm/cws": "4.5.3",
+    "@passport-next/passport-facebook": "^3.1.3",
+    "@passport-next/passport-google-oauth2": "^1.0.0",
     "ag-psd": "30.1.0",
     "ag-sockets": "14.0.2",
     "base64-js": "^1.5.1",
@@ -174,7 +176,7 @@
     "markdown-tree": "0.0.0",
     "mongoose": "9.3.2",
     "morgan": "1.9.1",
-    "ngx-bootstrap": "18.0.1",
+    "ngx-bootstrap": "19.0.2",
     "passport": "0.7.0",
     "passport-deviantart": "0.0.5",
     "passport-discord": "0.1.3",

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

@@ -23,6 +23,7 @@ const defaultDuplicatesLimit = 10;
 const year = (new Date()).getFullYear();
 
 @Component({
+	standalone: false,
 	selector: 'admin-account-details',
 	templateUrl: 'admin-account-details.pug',
 	styleUrls: ['admin-account-details.scss'],

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

@@ -12,6 +12,7 @@ let currentPage = 0;
 let not = false;
 
 @Component({
+	standalone: false,
 	selector: 'admin-accounts',
 	templateUrl: 'admin-accounts.pug',
 })

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

@@ -11,6 +11,7 @@ import {
 let state: BaseTableState;
 
 @Component({
+	standalone: false,
 	selector: 'admin-events',
 	templateUrl: 'admin-events.pug',
 })

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

@@ -4,6 +4,7 @@ import { Event } from '../../../common/adminInterfaces';
 import { AdminModel } from '../../services/adminModel';
 
 @Component({
+	standalone: false,
 	selector: 'admin-origin-details',
 	templateUrl: 'admin-origin-details.pug',
 })

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

@@ -4,6 +4,7 @@ import { faSync, faEraser, faClock, faUser, faChevronDown, faSpinner } from '../
 import { AdminModel } from '../../services/adminModel';
 
 @Component({
+	standalone: false,
 	selector: 'admin-origins',
 	templateUrl: 'admin-origins.pug',
 })

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

@@ -12,6 +12,7 @@ interface Field {
 }
 
 @Component({
+	standalone: false,
 	selector: 'admin-other',
 	templateUrl: 'admin-other.pug',
 })

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

@@ -9,6 +9,7 @@ let currentPage = 1;
 let query: FindPonyQuery = {};
 
 @Component({
+	standalone: false,
 	selector: 'admin-ponies',
 	templateUrl: 'admin-ponies.pug',
 	styleUrls: ['admin-ponies.scss'],

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

@@ -26,6 +26,7 @@ const frameTime = 1000 / SERVER_FPS;
 const timePadding = 10; // ms
 
 @Component({
+	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';
 
 @Component({
+	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';
 
 @Component({
+	standalone: false,
 	selector: 'admin-sign-in',
 	templateUrl: 'admin-sign-in.pug',
 })

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

@@ -8,6 +8,7 @@ import { AdminModel } from '../../services/adminModel';
 import { faCog, faSlidersH } from '../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'admin-state',
 	templateUrl: 'admin-state.pug',
 	styleUrls: ['admin-state.scss'],

src/ts/components/admin/admin.ts

@@ -17,6 +17,7 @@ export function popoverConfig() {
 }
 
 @Component({
+	standalone: false,
 	selector: 'pony-town-app',
 	templateUrl: 'admin.pug',
 	styleUrls: ['admin.scss'],

src/ts/components/admin/pipes/keysPipe.ts

@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
+	standalone: false,
 	name: 'keys',
 })
 export class KeysPipe implements PipeTransform {

src/ts/components/admin/pipes/orderByPipe.ts

@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
+	standalone: false,
 	name: 'orderBy',
 })
 export class OrderByPipe implements PipeTransform {

src/ts/components/admin/pipes/translitPipe.ts

@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { transliterate } from 'transliteration';
 
 @Pipe({
+	standalone: false,
 	name: 'translit',
 })
 export class TranslitPipe implements PipeTransform {

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

@@ -4,6 +4,7 @@ import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 
 @Component({
+	standalone: false,
 	selector: 'account-info-remote',
 	templateUrl: 'account-info-remote.pug',
 })

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

@@ -56,6 +56,7 @@ const alertExpires = [
 ];
 
 @Component({
+	standalone: false,
 	selector: 'account-info',
 	templateUrl: 'account-info.pug',
 	styleUrls: ['account-info.scss'],

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

@@ -4,6 +4,7 @@ import { Account, AccountStatus as IAccountStatus } from '../../../../common/adm
 import { faUserSecret } from '../../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'account-status',
 	templateUrl: 'account-status.pug',
 })

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

@@ -5,6 +5,7 @@ import { getAge } from '../../../../common/adminUtils';
 const year = (new Date()).getFullYear();
 
 @Component({
+	standalone: false,
 	selector: 'account-tooltip',
 	templateUrl: 'account-tooltip.pug',
 })

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

@@ -9,6 +9,7 @@ import { replaceSwears } from '../../../../client/adminHtmlUtils';
 import { addDays } from 'date-fns';
 
 @Component({
+	standalone: false,
 	selector: 'admin-chat-log',
 	templateUrl: 'admin-chat-log.pug',
 	styleUrls: ['admin-chat-log.scss'],

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

@@ -5,6 +5,7 @@ import { AdminModel } from '../../../services/adminModel';
 import { faInfo, faLock, faTrash, faEyeSlash, faArrowRight } from '../../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'auth-info-edit',
 	templateUrl: 'auth-info-edit.pug',
 })

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

@@ -4,6 +4,7 @@ import { AdminModel } from '../../../services/adminModel';
 import { Auth } from '../../../../common/adminInterfaces';
 
 @Component({
+	standalone: false,
 	selector: 'auth-info-remote',
 	templateUrl: 'auth-info-remote.pug',
 })

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

@@ -3,6 +3,7 @@ import { Auth } from '../../../../common/adminInterfaces';
 import { oauthIcons, faGlobe } from '../../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'auth-info',
 	templateUrl: 'auth-info.pug',
 	styleUrls: ['auth-info.scss'],

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

@@ -3,6 +3,7 @@ import { Subscription } from '../../../../common/interfaces';
 import { AdminModel } from '../../../services/adminModel';
 
 @Component({
+	standalone: false,
 	selector: 'auth-list-remote',
 	templateUrl: 'auth-list-remote.pug',
 	styleUrls: ['auth-list-remote.scss'],

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

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Auth } from '../../../../common/adminInterfaces';
 
 @Component({
+	standalone: false,
 	selector: 'auth-list',
 	templateUrl: 'auth-list.pug',
 	styleUrls: ['auth-list.scss'],

src/ts/components/admin/shared/ban-icon/ban-icon.ts

@@ -13,6 +13,7 @@ const ICONS = {
 };
 
 @Component({
+	standalone: false,
 	selector: 'ban-icon',
 	templateUrl: 'ban-icon.pug',
 	styleUrls: ['ban-icon.scss'],

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

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

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

@@ -5,6 +5,7 @@ import { faLanguage, faTrash, faComment, faClipboard } from '../../../../client/
 import { getTranslationUrl } from '../../../../common/adminUtils';
 
 @Component({
+	standalone: false,
 	selector: 'events-table',
 	templateUrl: 'events-table.pug',
 	styleUrls: ['events-table.scss'],

src/ts/components/admin/shared/from-now.ts

@@ -3,6 +3,7 @@ import { IntervalUpdateService } from '../../services/intervalUpdateService';
 import { formatDistanceToNow } from 'date-fns';
 
 @Component({
+	standalone: false,
 	selector: 'from-now',
 	template: '<span></span>',
 	changeDetection: ChangeDetectionStrategy.OnPush,

src/ts/components/admin/shared/on-off-switch/on-off-switch.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	standalone: false,
 	selector: 'on-off-switch',
 	templateUrl: 'on-off-switch.pug',
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -4,6 +4,7 @@ import { AdminModel } from '../../../services/adminModel';
 import { Origin } from '../../../../common/adminInterfaces';
 
 @Component({
+	standalone: false,
 	selector: 'origin-info-remote',
 	templateUrl: 'origin-info-remote.pug',
 })

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

@@ -4,6 +4,7 @@ import { AdminModel } from '../../../services/adminModel';
 import { countryCodeToName } from '../../../../common/countries';
 
 @Component({
+	standalone: false,
 	selector: 'origin-info',
 	templateUrl: 'origin-info.pug',
 	styleUrls: ['origin-info.scss'],

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

@@ -4,6 +4,7 @@ import { AdminModel } from '../../../services/adminModel';
 import { OriginInfoBase } from '../../../../common/adminInterfaces';
 
 @Component({
+	standalone: false,
 	selector: 'origin-list-remote',
 	templateUrl: 'origin-list-remote.pug',
 })

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

@@ -4,6 +4,7 @@ import { AdminModel } from '../../../services/adminModel';
 import { Character } from '../../../../common/adminInterfaces';
 
 @Component({
+	standalone: false,
 	selector: 'pony-info-remote',
 	templateUrl: 'pony-info-remote.pug',
 })

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

@@ -5,6 +5,7 @@ import { isForbiddenName } from '../../../../common/security';
 import { AdminModel } from '../../../services/adminModel';
 
 @Component({
+	standalone: false,
 	selector: 'pony-info',
 	templateUrl: 'pony-info.pug',
 	styleUrls: ['pony-info.scss'],

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

@@ -5,6 +5,7 @@ import { faTrash, faArrowRight } from '../../../../client/icons';
 import { Character, PonyIdDateName, DuplicateResult } from '../../../../common/adminInterfaces';
 
 @Component({
+	standalone: false,
 	selector: 'pony-list-remote',
 	templateUrl: 'pony-list-remote.pug',
 	styleUrls: ['pony-list-remote.scss'],

src/ts/components/admin/shared/time-field/time-field.ts

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

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

@@ -13,6 +13,7 @@ const extensions = {
 };
 
 @Component({
+	standalone: false,
 	selector: 'ua-info',
 	templateUrl: 'ua-info.pug',
 	styles: [`:host { display: inline-block; }`],

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

@@ -15,6 +15,7 @@ function toCredit(credit: Credit) {
 }
 
 @Component({
+	standalone: false,
 	selector: 'about',
 	templateUrl: 'about.pug',
 	styleUrls: ['about.scss'],

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

@@ -12,6 +12,7 @@ import { Router } from '@angular/router';
 import { cleanName } from '../../../common/stringUtils';
 
 @Component({
+	standalone: false,
 	selector: 'account',
 	templateUrl: 'account.pug',
 	styleUrls: ['account.scss'],

src/ts/components/app/app.ts

@@ -28,6 +28,7 @@ export function popoverConfig() {
 }
 
 @Component({
+	standalone: false,
 	selector: 'pony-town-app',
 	templateUrl: 'app.pug',
 	styleUrls: ['app.scss'],

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

@@ -57,6 +57,7 @@ function eyeSprite(e: PonyEye | undefined) {
 }
 
 @Component({
+	standalone: false,
 	selector: 'character',
 	templateUrl: 'character.pug',
 	styleUrls: ['character.scss'],

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

@@ -9,6 +9,7 @@ import { BLACK } from '../../../common/colors';
 import { Entity, Engine, EngineInfo, DebugFlags, tileTypeNames } from '../../../common/interfaces';
 
 @Component({
+	standalone: false,
 	selector: 'editor-box',
 	templateUrl: 'editor-box.pug',
 })

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

@@ -5,6 +5,7 @@ import { contactEmail, contactDiscord } from '../../../client/data';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
+	standalone: false,
 	selector: 'help',
 	templateUrl: 'help.pug',
 	styleUrls: ['help.scss'],

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

@@ -6,6 +6,7 @@ import { OAuthProvider, PonyObject } from '../../../common/interfaces';
 import { stand } from '../../../common/ponyAnimations';
 
 @Component({
+	standalone: false,
 	selector: 'home',
 	templateUrl: 'home.pug',
 	styleUrls: ['home.scss'],

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

@@ -10,6 +10,7 @@ import { last } from '../../../common/utils';
 import { faCog } from '../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'action-bar',
 	templateUrl: 'action-bar.pug',
 	styleUrls: ['action-bar.scss'],

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

@@ -5,6 +5,7 @@ import { drawAction } from '../../../client/buttonActions';
 import { removeItem } from '../../../common/utils';
 
 @Component({
+	standalone: false,
 	selector: 'action-button',
 	templateUrl: 'action-button.pug',
 	styleUrls: ['action-button.scss'],

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

@@ -23,6 +23,7 @@ function eyeSprite(e: PonyEye | undefined) {
 }
 
 @Component({
+	standalone: false,
 	selector: 'actions-modal',
 	templateUrl: 'actions-modal.pug',
 	styleUrls: ['actions-modal.scss'],

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

@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from
 import { parseColor, colorToCSS } from '../../../common/color';
 
 @Component({
+	standalone: false,
 	selector: 'bitmap-box',
 	templateUrl: 'bitmap-box.pug',
 	styleUrls: ['bitmap-box.scss'],

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

@@ -10,6 +10,7 @@ export interface ButtMarkEditorState {
 }
 
 @Component({
+	standalone: false,
 	selector: 'butt-mark-editor',
 	templateUrl: 'butt-mark-editor.pug',
 })

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

@@ -43,6 +43,7 @@ function comparePonies(a: PonyObject, b: PonyObject) {
 }
 
 @Component({
+	standalone: false,
 	selector: 'character-list',
 	templateUrl: 'character-list.pug',
 	styleUrls: ['character-list.scss'],

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

@@ -21,6 +21,7 @@ const DEFAULT_STATE = defaultPonyState();
 const DEFAULT_OPTIONS = defaultDrawPonyOptions();
 
 @Component({
+	standalone: false,
 	selector: 'character-preview',
 	template: '<canvas class="rounded" #canvas></canvas>',
 	styles: [`:host { display: block; } canvas { width: 100%; height: 100%; }`],

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

@@ -12,6 +12,7 @@ import { delay } from '../../../common/utils';
 import { isMobile } from '../../../client/data';
 
 @Component({
+	standalone: false,
 	selector: 'character-select',
 	templateUrl: 'character-select.pug',
 	styleUrls: ['character-select.scss'],

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

@@ -39,6 +39,7 @@ function isActionCommand(message: string) {
 }
 
 @Component({
+	standalone: false,
 	selector: 'chat-box',
 	templateUrl: 'chat-box.pug',
 	styleUrls: ['chat-box.scss'],

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

@@ -208,6 +208,7 @@ function findUserIndex(users: IndexEntryUser[], id: number, crc: number | undefi
 }
 
 @Component({
+	standalone: false,
 	selector: 'chat-log',
 	templateUrl: 'chat-log.pug',
 	styleUrls: ['chat-log.scss'],

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

@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 import { faCheck } from '../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'check-box',
 	templateUrl: 'check-box.pug',
 	styleUrls: ['check-box.scss'],

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

@@ -7,6 +7,7 @@ import { faChevronDown } from '../../../client/icons';
 const SIZE = 175;
 
 @Component({
+	standalone: false,
 	selector: 'color-picker',
 	templateUrl: 'color-picker.pug',
 	styleUrls: ['color-picker.scss'],

src/ts/components/shared/custom-checkbox/custom-checkbox.ts

@@ -2,6 +2,7 @@ import { Component, ChangeDetectionStrategy, Output, Input, EventEmitter } from
 import { uniqueId } from 'lodash';
 
 @Component({
+	standalone: false,
 	selector: 'custom-checkbox',
 	templateUrl: 'custom-checkbox.pug',
 	styleUrls: ['custom-checkbox.scss'],

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

@@ -4,6 +4,7 @@ import { MONTH_NAMES_EN } from '../../../common/constants';
 import { getLocale } from '../../../client/clientUtils';
 
 @Component({
+	standalone: false,
 	selector: 'date-picker',
 	templateUrl: 'date-picker.pug',
 })

src/ts/components/shared/directives/agAutoFocus.ts

@@ -1,6 +1,7 @@
 import { Directive, AfterViewInit, ElementRef } from '@angular/core';
 
 @Directive({
+	standalone: false,
 	selector: '[agAutoFocus]'
 })
 export class AgAutoFocus implements AfterViewInit {

src/ts/components/shared/directives/agDrag.ts

@@ -123,7 +123,7 @@ export function handleDrag(element: HTMLElement, emit: (event: AgDragEvent) => v
 	return () => handlers.forEach(f => f());
 }
 
-@Directive({ selector: '[agDrag]' })
+@Directive({ standalone: false, selector: '[agDrag]' })
 export class AgDrag implements OnInit, OnDestroy {
 	@Input('agDragRelative') relative: 'self' | 'parent' | undefined = undefined;
 	@Input('agDragPrevent') prevent = false;

src/ts/components/shared/directives/anchor.ts

@@ -1,6 +1,7 @@
 import { Directive, OnInit, ElementRef } from '@angular/core';
 
 @Directive({
+	standalone: false,
 	selector: 'a[href]'
 })
 export class Anchor implements OnInit {

src/ts/components/shared/directives/btnHighlight.ts

@@ -2,6 +2,7 @@ import { Directive, Input, Optional } from '@angular/core';
 import { NgModel } from '@angular/forms';
 
 @Directive({
+	standalone: false,
 	selector: '[btnHighlight]',
 	host: {
 		'[class.btn-default]': '!on',
@@ -19,6 +20,7 @@ export class BtnHighlight {
 }
 
 @Directive({
+	standalone: false,
 	selector: '[btnHighlightDanger]',
 	host: {
 		'[class.btn-default]': '!btnHighlightDanger',

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

@@ -76,6 +76,7 @@ export class DraggableService {
 }
 
 @Component({
+	standalone: false,
 	selector: 'draggable-outlet',
 	template: `<div></div>`,
 	styles: [`:host { position: fixed; top: 0; left: 0; z-index: 10000; }`],
@@ -86,7 +87,7 @@ export class DraggableOutlet {
 	}
 }
 
-@Directive({ selector: '[draggableDrop]' })
+@Directive({ standalone: false, selector: '[draggableDrop]' })
 export class DraggableDrop<T> implements OnInit, OnDestroy {
 	@Input('draggablePad') pad = 0;
 	@Output('draggableDrop') drop = new EventEmitter<T>();
@@ -119,6 +120,7 @@ export class DraggableDrop<T> implements OnInit, OnDestroy {
 }
 
 @Directive({
+	standalone: false,
 	selector: '[draggableItem]',
 	host: {
 		'[style.touch-action]': `touchAction`,

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

@@ -12,6 +12,7 @@ export class DropdownOutletService {
 }
 
 @Component({
+	standalone: false,
 	selector: 'dropdown-outlet',
 	template: `<ng-template></ng-template>`,
 })
@@ -23,6 +24,7 @@ export class DropdownOutlet {
 }
 
 @Directive({
+	standalone: false,
 	selector: '[dropdownMenu]',
 })
 export class DropdownMenu {
@@ -108,6 +110,7 @@ export class DropdownMenu {
 }
 
 @Directive({
+	standalone: false,
 	selector: '[dropdown]',
 	exportAs: 'ag-dropdown',
 	host: {
@@ -201,6 +204,7 @@ export class Dropdown {
 }
 
 @Directive({
+	standalone: false,
 	selector: '[dropdownToggle]',
 	host: {
 		'aria-haspopup': 'true',

src/ts/components/shared/directives/fixToTop.ts

@@ -1,6 +1,7 @@
 import { Directive, ElementRef, Input, HostListener, HostBinding, Output, EventEmitter } from '@angular/core';
 
 @Directive({
+	standalone: false,
 	selector: '[fixToTop]',
 })
 export class FixToTop {

src/ts/components/shared/directives/focusTitle.ts

@@ -1,6 +1,7 @@
 import { Directive, AfterViewInit, ElementRef } from '@angular/core';
 
 @Directive({
+	standalone: false,
 	selector: '[focusTitle]',
 	host: {
 		'tabindex': '-1',

src/ts/components/shared/directives/focusTrap.ts

@@ -3,6 +3,7 @@ import { isParentOf, focusFirstElement, findFocusableElements } from '../../../c
 import { isMobile } from '../../../client/data';
 
 @Directive({
+	standalone: false,
 	selector: '[focusTrap]',
 })
 export class FocusTrap implements OnInit, OnDestroy {

src/ts/components/shared/directives/hasFeature.ts

@@ -4,6 +4,7 @@ import { hasFeatureFlag, featureFlagsChanged } from '../../../client/clientUtils
 import { Model } from '../../services/model';
 
 @Directive({
+	standalone: false,
 	selector: '[hasFeature]',
 })
 export class HasFeature implements AfterViewInit, OnDestroy {

src/ts/components/shared/directives/labelledBy.ts

@@ -3,6 +3,7 @@ import { uniqueId } from 'lodash';
 import { findParentElement } from '../../../client/htmlUtils';
 
 @Directive({
+	standalone: false,
 	selector: '[labelledBy]',
 })
 export class LabelledBy implements OnInit {

src/ts/components/shared/directives/linkCurrent.ts

@@ -2,6 +2,7 @@ import { Directive, HostBinding } from '@angular/core';
 import { RouterLinkActive } from '@angular/router';
 
 @Directive({
+	standalone: false,
 	selector: '[linkCurrent]',
 })
 export class LinkCurrent {

src/ts/components/shared/directives/revSrc.ts

@@ -2,6 +2,7 @@ import { Directive, Input, HostBinding } from '@angular/core';
 import { getUrl } from '../../../client/rev';
 
 @Directive({
+	standalone: false,
 	selector: '[revSrc]',
 })
 export class RevSrc {

src/ts/components/shared/directives/saveActiveTab.ts

@@ -4,6 +4,7 @@ import { Tabset } from '../tabset/tabset';
 import { StorageService } from '../../services/storageService';
 
 @Directive({
+	standalone: false,
 	selector: '[saveActiveTab]',
 })
 export class SaveActiveTab implements OnInit, OnDestroy {

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { discordLink } from '../../../client/data';
 
 @Component({
+	standalone: false,
 	selector: 'discord-button',
 	templateUrl: 'discord-button.pug',
 	styleUrls: ['discord-button.scss'],

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

@@ -25,6 +25,7 @@ const DERP: Expression = {
 };
 
 @Component({
+	standalone: false,
 	selector: 'discord-pony',
 	templateUrl: 'discord-pony.pug',
 })

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

@@ -5,6 +5,7 @@ import { getCharacterSprite } from '../../../graphics/spriteFont';
 import { loadAndInitSpriteSheets } from '../../../client/loadSprites';
 
 @Component({
+	standalone: false,
 	selector: 'emote-box',
 	template: '<img #image class="emote-box pixelart" />',
 	styles: ['.emote-box { pointer-events: none; }'],

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

@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { faLock } from '../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'fill-outline',
 	templateUrl: 'fill-outline.pug',
 	styleUrls: ['fill-outline.scss'],

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

@@ -7,6 +7,7 @@ import { removeItem } from '../../../common/utils';
 import { SettingsService } from '../../services/settingsService';
 
 @Component({
+	standalone: false,
 	selector: 'friends-box',
 	templateUrl: 'friends-box.pug',
 	styleUrls: ['friends-box.scss'],

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

@@ -4,6 +4,7 @@ import { InstallService } from '../../services/installService';
 import { isMobile } from '../../../client/data';
 
 @Component({
+	standalone: false,
 	selector: 'install-button',
 	templateUrl: 'install-button.pug',
 	styleUrls: ['install-button.scss'],

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

@@ -7,6 +7,7 @@ import { removeItem } from '../../../common/utils';
 import { Model } from '../../services/model';
 
 @Component({
+	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';
 
 @Component({
+	standalone: false,
 	selector: 'kbd-key',
 	templateUrl: 'kbd-key.pug',
 })

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

@@ -9,6 +9,7 @@ import { SettingsService } from '../../services/settingsService';
 import { REQUEST_DATE_OF_BIRTH } from '../../../common/constants';
 
 @Component({
+	standalone: false,
 	selector: 'menu-bar',
 	templateUrl: 'menu-bar.pug',
 	styleUrls: ['menu-bar.scss'],

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

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { emptyIcon } from '../../../client/icons';
 
 @Component({
+	standalone: false,
 	selector: 'menu-item',
 	templateUrl: 'menu-item.pug',
 	styleUrls: ['menu-item.scss'],

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

@@ -9,6 +9,7 @@ const ageLabels = ['', 'M', 'A', '', '', '[M]', '[A]'];
 const ageTitles = ['Not set', 'Minor', 'Adult', '', '', 'Minor (locked)', 'Adult (locked)'];
 
 @Component({
+	standalone: false,
 	selector: 'mod-box',
 	templateUrl: 'mod-box.pug',
 	styleUrls: ['mod-box.scss'],

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

@@ -6,6 +6,7 @@ import { faBan } from '../../../client/icons';
 import { getPaletteInfo } from '../../../client/pony';
 
 @Component({
+	standalone: false,
 	selector: 'notification-item',
 	templateUrl: 'notification-item.pug',
 	styleUrls: ['notification-item.scss'],

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

@@ -5,6 +5,7 @@ import { faEllipsisV } from '../../../client/icons';
 const LIMIT = 8;
 
 @Component({
+	standalone: false,
 	selector: 'notification-list',
 	templateUrl: 'notification-list.pug',
 	styleUrls: ['notification-list.scss'],

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

@@ -4,6 +4,7 @@ import { Model } from '../../services/model';
 import { hardReload } from '../../../client/clientUtils';
 
 @Component({
+	standalone: false,
 	selector: 'page-loader',
 	templateUrl: 'page-loader.pug',
 	styleUrls: ['page-loader.scss'],

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

@@ -5,6 +5,7 @@ import { partyLeaderIcon, offlineIcon } from '../../../client/icons';
 import { getPaletteInfo } from '../../../client/pony';
 
 @Component({
+	standalone: false,
 	selector: 'party-box',
 	templateUrl: 'party-box.pug',
 	styleUrls: ['party-box.scss'],

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

@@ -12,6 +12,7 @@ function visibleMembers(members: PartyMember[], max: number, start: number) {
 }
 
 @Component({
+	standalone: false,
 	selector: 'party-list',
 	templateUrl: 'party-list.pug',
 	styleUrls: ['party-list.scss'],

src/ts/components/shared/pipes/siteName.ts

@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
+	standalone: false,
 	name: 'siteName',
 })
 export class SiteNamePipe implements PipeTransform {

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

@@ -29,6 +29,7 @@ const ignoredErrors = [
 ];
 
 @Component({
+	standalone: false,
 	selector: 'play-box',
 	templateUrl: 'play-box.pug',
 	styleUrls: ['play-box.scss'],

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

@@ -3,6 +3,7 @@ import { discordLink } from '../../../client/data';
 import { GENERAL_RULES } from '../../../common/constants';
 
 @Component({
+	standalone: false,
 	selector: 'play-notice',
 	templateUrl: 'play-notice.pug',
 })

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

@@ -14,6 +14,7 @@ import { isIgnored, isHidden, isFriend } from '../../../common/entityUtils';
 import { setFlag } from '../../../common/utils';
 
 @Component({
+	standalone: false,
 	selector: 'pony-box',
 	templateUrl: 'pony-box.pug',
 	styleUrls: ['pony-box.scss'],

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

@@ -26,6 +26,7 @@ const options = defaultDrawPonyOptions();
 const state = defaultPonyState();
 
 @Component({
+	standalone: false,
 	selector: 'portrait-box',
 	templateUrl: 'portrait-box.pug',
 	styleUrls: ['portrait-box.scss'],

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

@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { times } from 'lodash';
 
 @Component({
+	standalone: false,
 	selector: 'scale-picker',
 	templateUrl: 'scale-picker.pug',
 })

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

@@ -7,6 +7,7 @@ const FILLS = ['Orange', 'DodgerBlue', 'LimeGreen', 'Orchid', 'crimson', 'Aquama
 const OUTLINES = ['Chocolate', 'SteelBlue', 'ForestGreen', 'DarkOrchid', 'darkred', 'DarkTurquoise'];
 
 @Directive({
+	standalone: false,
 	selector: '[setOutlineHidden]',
 })
 export class SetOutlineHidden {
@@ -14,6 +15,7 @@ export class SetOutlineHidden {
 }
 
 @Component({
+	standalone: false,
 	selector: 'set-selection',
 	templateUrl: 'set-selection.pug',
 	styleUrls: ['set-selection.scss'],

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

@@ -14,6 +14,7 @@ import { SettingsService } from '../../services/settingsService';
 import { Audio } from '../../services/audio';
 
 @Component({
+	standalone: false,
 	selector: 'settings-box',
 	templateUrl: 'settings-box.pug',
 	styleUrls: ['settings-box.scss'],