Update to angular 19

2026-09-24 21:55:52 +02:00 · 2026-08-05 07:46:07 +02:00
parent 8bd323db91
commit 5e44c88cd3
133 changed files with 4671 additions and 2456 deletions
@@ -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);
@@ -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-analyze": "npm run webpack-prod -- --env.analyze",
-    "webpack-debug": "npm run webpack-prod -- --env.debug",
-    "webpack-admin": "npm run webpack-prod -- --env.admin",
-    "webpack-stats": "npm run webpack-prod -- --env.debug --json > stats.json",
+    "webpack-main": "npm run webpack-prod -- --env main",
+    "webpack-analyze": "npm run webpack-prod -- --env analyze",
+    "webpack-debug": "npm run webpack-prod -- --env debug",
+    "webpack-admin": "npm run webpack-prod -- --env admin",
+    "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/animations": "18.2.14",
-    "@angular/cdk": "18.2.14",
-    "@angular/common": "18.2.14",
-    "@angular/compiler": "18.2.14",
-    "@angular/compiler-cli": "18.2.14",
-    "@angular/core": "18.2.14",
-    "@angular/forms": "18.2.14",
-    "@angular/platform-browser": "18.2.14",
-    "@angular/platform-browser-dynamic": "18.2.14",
-    "@angular/platform-server": "18.2.14",
-    "@angular/router": "18.2.14",
-    "@ngtools/webpack": "18.0.0",
-    "@fortawesome/angular-fontawesome": "0.15.0",
+    "@angular-devkit/build-angular": "19.2.27",
+    "@angular/animations": "19.2.25",
+    "@angular/common": "19.2.25",
+    "@angular/compiler": "19.2.25",
+    "@angular/compiler-cli": "19.2.25",
+    "@angular/core": "19.2.25",
+    "@angular/forms": "19.2.25",
+    "@angular/platform-browser": "19.2.25",
+    "@angular/platform-browser-dynamic": "19.2.25",
+    "@angular/platform-server": "19.2.25",
+    "@angular/router": "19.2.25",
+    "@fortawesome/angular-fontawesome": "1.0.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",
@@ -203,4 +205,4 @@
    "webgl-debug": "2.0.1",
    "yargs": "18.0.0"
  }
-}
+}
@@ -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'],
@@ -12,6 +12,7 @@ let currentPage = 0;
 let not = false;

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

@Component({
+	standalone: false,
 	selector: 'admin-events',
 	templateUrl: 'admin-events.pug',
 })
@@ -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',
 })
@@ -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',
 })
@@ -12,6 +12,7 @@ interface Field {
 }

@Component({
+	standalone: false,
 	selector: 'admin-other',
 	templateUrl: 'admin-other.pug',
 })
@@ -9,6 +9,7 @@ let currentPage = 1;
 let query: FindPonyQuery = {};

@Component({
+	standalone: false,
 	selector: 'admin-ponies',
 	templateUrl: 'admin-ponies.pug',
 	styleUrls: ['admin-ponies.scss'],
@@ -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',
 })
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';

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

@Component({
+	standalone: false,
 	selector: 'admin-sign-in',
 	templateUrl: 'admin-sign-in.pug',
 })
@@ -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'],
@@ -17,6 +17,7 @@ export function popoverConfig() {
 }

@Component({
+	standalone: false,
 	selector: 'pony-town-app',
 	templateUrl: 'admin.pug',
 	styleUrls: ['admin.scss'],
@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';

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

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

@Pipe({
+	standalone: false,
 	name: 'translit',
 })
 export class TranslitPipe implements PipeTransform {
@@ -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',
 })
@@ -56,6 +56,7 @@ const alertExpires = [
 ];

@Component({
+	standalone: false,
 	selector: 'account-info',
 	templateUrl: 'account-info.pug',
 	styleUrls: ['account-info.scss'],
@@ -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',
 })
@@ -5,6 +5,7 @@ import { getAge } from '../../../../common/adminUtils';
 const year = (new Date()).getFullYear();

@Component({
+	standalone: false,
 	selector: 'account-tooltip',
 	templateUrl: 'account-tooltip.pug',
 })
@@ -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'],
@@ -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',
 })
@@ -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',
 })
@@ -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'],
@@ -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'],
@@ -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'],
@@ -13,6 +13,7 @@ const ICONS = {
 };

@Component({
+	standalone: false,
 	selector: 'ban-icon',
 	templateUrl: 'ban-icon.pug',
 	styleUrls: ['ban-icon.scss'],
@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';

@Component({
+	standalone: false,
 	selector: 'email-list',
 	templateUrl: 'email-list.pug',
 })
@@ -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'],
@@ -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,
@@ -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,
@@ -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',
 })
@@ -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'],
@@ -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',
 })
@@ -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',
 })
@@ -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'],
@@ -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'],
@@ -1,6 +1,7 @@
 import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
+	standalone: false,
 	selector: 'time-field',
 	templateUrl: 'time-field.pug',
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -13,6 +13,7 @@ const extensions = {
 };

@Component({
+	standalone: false,
 	selector: 'ua-info',
 	templateUrl: 'ua-info.pug',
 	styles: [`:host { display: inline-block; }`],
@@ -15,6 +15,7 @@ function toCredit(credit: Credit) {
 }

@Component({
+	standalone: false,
 	selector: 'about',
 	templateUrl: 'about.pug',
 	styleUrls: ['about.scss'],
@@ -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'],
@@ -28,6 +28,7 @@ export function popoverConfig() {
 }

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

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

@Component({
+	standalone: false,
 	selector: 'actions-modal',
 	templateUrl: 'actions-modal.pug',
 	styleUrls: ['actions-modal.scss'],
@@ -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'],
@@ -10,6 +10,7 @@ export interface ButtMarkEditorState {
 }

@Component({
+	standalone: false,
 	selector: 'butt-mark-editor',
 	templateUrl: 'butt-mark-editor.pug',
 })
@@ -43,6 +43,7 @@ function comparePonies(a: PonyObject, b: PonyObject) {
 }

@Component({
+	standalone: false,
 	selector: 'character-list',
 	templateUrl: 'character-list.pug',
 	styleUrls: ['character-list.scss'],
@@ -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%; }`],
@@ -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'],
@@ -39,6 +39,7 @@ function isActionCommand(message: string) {
 }

@Component({
+	standalone: false,
 	selector: 'chat-box',
 	templateUrl: 'chat-box.pug',
 	styleUrls: ['chat-box.scss'],
@@ -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'],
@@ -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'],
@@ -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'],
@@ -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'],
@@ -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',
 })
@@ -1,6 +1,7 @@
 import { Directive, AfterViewInit, ElementRef } from '@angular/core';

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

@Directive({
+	standalone: false,
 	selector: 'a[href]'
 })
 export class Anchor implements OnInit {
@@ -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',
@@ -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`,
@@ -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',
@@ -1,6 +1,7 @@
 import { Directive, ElementRef, Input, HostListener, HostBinding, Output, EventEmitter } from '@angular/core';

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

@Directive({
+	standalone: false,
 	selector: '[focusTitle]',
 	host: {
 		'tabindex': '-1',
@@ -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 {
@@ -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 {
@@ -3,6 +3,7 @@ import { uniqueId } from 'lodash';
 import { findParentElement } from '../../../client/htmlUtils';

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

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

@Directive({
+	standalone: false,
 	selector: '[revSrc]',
 })
 export class RevSrc {
@@ -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 {
@@ -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'],
@@ -25,6 +25,7 @@ const DERP: Expression = {
 };

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

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

@Component({
+	standalone: false,
 	selector: 'kbd-key',
 	templateUrl: 'kbd-key.pug',
 })
@@ -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'],
@@ -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'],
@@ -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'],
@@ -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'],
@@ -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'],
@@ -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'],
@@ -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'],
@@ -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'],
@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
+	standalone: false,
 	name: 'siteName',
 })
 export class SiteNamePipe implements PipeTransform {
@@ -29,6 +29,7 @@ const ignoredErrors = [
 ];

@Component({
+	standalone: false,
 	selector: 'play-box',
 	templateUrl: 'play-box.pug',
 	styleUrls: ['play-box.scss'],
@@ -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',
 })
@@ -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'],
@@ -26,6 +26,7 @@ const options = defaultDrawPonyOptions();
 const state = defaultPonyState();

@Component({
+	standalone: false,
 	selector: 'portrait-box',
 	templateUrl: 'portrait-box.pug',
 	styleUrls: ['portrait-box.scss'],
@@ -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',
 })
@@ -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'],
@@ -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'],
--- a/Show More
+++ b/Show More