Update to Angular 17

package.json

@@ -50,19 +50,19 @@
     "webpack-cli": "^7.0.2"
   },
   "dependencies": {
-    "@angular-devkit/build-angular": "^16.2.12",
+    "@angular-devkit/build-angular": "^17.3.0",
-    "@angular/animations": "^16.2.12",
+    "@angular/animations": "^17.3.0",
-    "@angular/cdk": "^16.2.12",
+    "@angular/cdk": "^17.3.0",
-    "@angular/common": "^16.2.12",
+    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^16.2.12",
+    "@angular/compiler": "^17.3.0",
-    "@angular/compiler-cli": "^16.2.12",
+    "@angular/compiler-cli": "^17.3.0",
-    "@angular/core": "^16.2.12",
+    "@angular/core": "^17.3.0",
-    "@angular/forms": "^16.2.12",
+    "@angular/forms": "^17.3.0",
-    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^17.3.0",
-    "@angular/platform-server": "^16.2.12",
+    "@angular/platform-server": "^17.3.0",
-    "@angular/router": "^16.2.12",
+    "@angular/router": "^17.3.0",
-    "@ngtools/webpack": "^16.2.12",
+    "@ngtools/webpack": "^17.3.0",
     "@encharm/cws": "^4.5.3",
     "@fortawesome/angular-fontawesome": "^0.11.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -167,7 +167,7 @@
     "moment": "^2.24.0",
     "mongoose": "^5.6.11",
     "morgan": "^1.9.1",
-    "ngx-bootstrap": "^11.0.2",
+    "ngx-bootstrap": "^12.0.0",
     "node-ipc": "^9.1.1",
     "parallel-webpack": "^2.4.0",
     "passport": "^0.4.0",
@@ -206,7 +206,7 @@
     "tslib": "^2.8.1",
     "tslint": "^5.19.0",
     "tsutils": "^3.17.1",
-    "typescript": "~4.9",
+    "typescript": "~5.2",
     "ua-parser-js": "^0.7.20",
     "webgl-debug": "^2.0.1",
     "webpack-bundle-analyzer": "^5.2.0",
@@ -215,6 +215,6 @@
     "workbox-cli": "^4.3.1",
     "wrapper-webpack-plugin": "^2.2.2",
     "yargs": "^14.0.0",
-    "zone.js": "^0.13.3"
+    "zone.js": "^0.14.2"
   }
 }

src/ts/bootstrap-common.ts

@@ -2,8 +2,8 @@ import 'focus-visible';
 import 'core-js/es';
 import 'core-js/stable/promise/finally';
 import 'core-js/proposals/reflect-metadata';
-import 'zone.js/dist/zone';
+import 'zone.js';
-import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/plugins/long-stack-trace-zone';
 import 'canvas-toBlob';
 import './client/polyfils';
 import { enableProdMode } from '@angular/core';

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

@@ -3,8 +3,8 @@ ng-template(#descriptionTooltip)
 		p Description and tags help you organize and search for your ponies.
 		p Use # tags to be able to quickly find specific ponies like #oc #winter or #unicorn
 		p
-			| Use @ tags to sort your ponies. @top to put them at the start of the list, @end at the end,
+			| Use @ tags to sort your ponies. @top to put them at the start of the list, @end at the end,
-			| and @1 @2 @3 ... to order them manually.
+			| and @1 @2 @3 ... to order them manually.
 
 page-loader(*ngIf="!playing")
 

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

@@ -461,7 +461,7 @@ export class ToolsAnimation implements OnInit, OnDestroy {
 		if (this.mode === 'body') {
 			const frames = this.bodyAnimation.frames
 				.map(f => [f.duration, '[' + compressBodyFrame(f).join(', ') + ']'])
-				.map(([repeat, frame]) => repeat > 1 ? `...repeat(${repeat}, ${frame})` : frame);
+				.map(([repeat, frame]) => parseInt(`${repeat}`, 10) > 1 ? `...repeat(${repeat}, ${frame})` : frame);
 			console.log(`frames: [\n${frames.map(x => `\t${x}`).join(',\n')}\n]`);
 
 			if (this.bodyAnimation.frames.some(f => !!f.shadowFrame || !!f.shadowOffset)) {
@@ -471,7 +471,7 @@ export class ToolsAnimation implements OnInit, OnDestroy {
 		} else {
 			const frames = this.headAnimation.frames
 			.map(f => [f.duration, '[' + compressHeadFrame(f).join(', ') + ']'])
-			.map(([repeat, frame]) => repeat > 1 ? `...repeat(${repeat}, ${frame})` : frame);
+			.map(([repeat, frame]) => parseInt(`${repeat}`, 10) > 1 ? `...repeat(${repeat}, ${frame})` : frame);
 			console.log(`frames: [\n${frames.map(x => `\t${x}`).join(',\n')}\n]`);
 		}
 	}

src/ts/graphics/webgl/glFbo.ts

@@ -63,7 +63,7 @@ export function createFrameBuffer(gl: WebGL, width: number, height: number, opti
 		}
 	}
 
-	let colorType = gl.UNSIGNED_BYTE;
+	let colorType: number = gl.UNSIGNED_BYTE;
 	const OES_texture_float = gl.getExtension('OES_texture_float');
 
 	if (float && numColors > 0) {

src/ts/tests/client/ponyStates.spec.ts

@@ -43,7 +43,7 @@ describe('ponyStates', () => {
 		});
 
 		it('throws on invalid state', () => {
-			expect(() => flagsToState(112, false, false)).throw('Invalid pony state (112)');
+			expect(() => flagsToState(112 as EntityState, false, false)).throw('Invalid pony state (112)');
 		});
 	});
 

src/ts/tests/client/worldMap.spec.ts

@@ -36,7 +36,7 @@ describe('worldMap', () => {
 			const e = entity(123, 0, 0, 2);
 			addEntity(game.map, e);
 
-			handleUpdateEntity(game, { ...def, id: 123, x: 2, y: 3, vx: 4, vy: 5, state: 123, expression: 234 });
+			handleUpdateEntity(game, { ...def, id: 123, x: 2, y: 3, vx: 4, vy: 5, state: 123 as EntityState, expression: 234 });
 
 			expect(e.x).equal(2);
 			expect(e.y).equal(3);
@@ -74,7 +74,7 @@ describe('worldMap', () => {
 			e.ponyState = defaultPonyState();
 			addEntity(game.map, e);
 
-			handleUpdateEntity(game, { ...def, id: 123, x: 2, y: 3, vx: 4, vy: 5, state: 123 });
+			handleUpdateEntity(game, { ...def, id: 123, x: 2, y: 3, vx: 4, vy: 5, state: 123 as EntityState });
 
 			expect(e.state).equal(123);
 		});

src/ts/tests/common/colors.spec.ts

@@ -40,7 +40,7 @@ describe('colors', () => {
 
 		it('returns white color for other types', () => {
 			expect(getMessageColor(MessageType.Chat)).equals(WHITE);
-			expect(getMessageColor(999)).equals(WHITE);
+			expect(getMessageColor(999 as MessageType)).equals(WHITE);
 		});
 	});
 });

src/ts/tests/common/encoders/updateEncoder.spec.ts

@@ -247,7 +247,7 @@ describe('updateEncoder', () => {
 			setEntityName(entity, 'foo');
 			const info = new Uint8Array([1, 2, 3]);
 			entity.client = mockClient();
-			entity.state = 123;
+			entity.state = 123 as EntityState;
 			entity.options = { toy: 5, expr: 123 };
 			entity.encryptedInfoSafe = info;
 			entity.vx = 1;
@@ -259,7 +259,7 @@ describe('updateEncoder', () => {
 					{
 						id: 123, x: 10, y: 20, vx: 1, vy: 2, type: 32,
 						name: 'foo', switchRegion: false, crc: 0, info,
-						state: 123, expression: undefined, action: undefined, options: { toy: 5, expr: 123 },
+						state: 123 as EntityState, expression: undefined, action: undefined, options: { toy: 5, expr: 123 },
 						playerState: 2, filterName: false,
 					},
 				],

src/ts/tests/common/expressionUtils.spec.ts

@@ -34,7 +34,7 @@ describe('expressionUtils', () => {
 
 			const expr = parseExpression('^^');
 			expect(expr).eql(expected, '1st');
-			expr!.extra = 999;
+			expr!.extra = 999 as ExpressionExtra;
 
 			expect(parseExpression('^^')).eql(expected, '2nd');
 		});

src/ts/tests/common/movementUtils.spec.ts

@@ -97,7 +97,7 @@ describe('movementUtils', () => {
 		});
 
 		it('handles invalid flags', () => {
-			const [a, b, c, d, e] = encodeMovement(10, 10, 1, 999, 123, rect(0, 0, 100, 100));
+			const [a, b, c, d, e] = encodeMovement(10, 10, 1, 999 as EntityState, 123, rect(0, 0, 100, 100));
 
 			expect(decodeMovement(a, b, c, d, e)).eql({
 				x: 10.015625, y: 10.020833333333334, dir: 1, flags: 231, time: 123,

src/ts/tests/server/chat.spec.ts

@@ -185,7 +185,7 @@ describe('chat', () => {
 		});
 
 		it('sends say for invalid type', () => {
-			say(client, 'test', 100, undefined, {});
+			say(client, 'test', 100 as ChatType, undefined, {});
 
 			expect(client.saysQueue).eql([[client.pony.id, 'test', MessageType.Chat]]);
 		});

src/ts/tests/server/entityUtils.spec.ts

@@ -5,7 +5,7 @@ import { stub, assert } from 'sinon';
 import { findClosest, updateEntityOptions, updateEntityState, fixPosition } from '../../server/entityUtils';
 import { mockClient, serverEntity } from '../mocks';
 import { createServerRegion } from '../../server/serverRegion';
-import { UpdateFlags } from '../../common/interfaces';
+import { EntityState, UpdateFlags } from '../../common/interfaces';
 import { IClient } from '../../server/serverInterfaces';
 import { createServerMap } from '../../server/serverMap';
 
@@ -61,7 +61,7 @@ describe('entityUtils [server]', () => {
 		it('sets flags on entity', () => {
 			const entity = serverEntity(0);
 
-			updateEntityState(entity, 123);
+			updateEntityState(entity, 123 as EntityState);
 
 			expect(entity.state).equal(123);
 		});
@@ -72,7 +72,7 @@ describe('entityUtils [server]', () => {
 			entity.client = mockClient({});
 			entity.region = region;
 
-			updateEntityState(entity, 123);
+			updateEntityState(entity, 123 as EntityState);
 
 			expect(region.entityUpdates).eql([
 				{ entity, flags: UpdateFlags.State, x: 0, y: 0, vx: 0, vy: 0, action: 0, playerState: 0, options: undefined },
@@ -84,7 +84,7 @@ describe('entityUtils [server]', () => {
 			entity.region = createServerRegion(0, 0);
 			entity.client = mockClient({ shadowed: true });
 
-			updateEntityState(entity, 123);
+			updateEntityState(entity, 123 as EntityState);
 
 			expect(getWriterBuffer(entity.client.updateQueue)).eql(new Uint8Array([2, 0, 4, 0, 0, 0, 12, 123]));
 		});

src/ts/tests/server/serverActions.spec.ts

@@ -477,7 +477,7 @@ describe('ServerActions', () => {
 		it('throws on invalid action', () => {
 			stub(world, 'getClientByEntityId').returns({} as any);
 
-			expect(() => serverActions.playerAction(1, 999, undefined))
+			expect(() => serverActions.playerAction(1, 999 as PlayerAction, undefined))
 				.throw('Invalid player action (undefined) [999]');
 		});
 	});
@@ -628,7 +628,7 @@ describe('ServerActions', () => {
 		});
 
 		it('rejects on invalid action', async () => {
-			await expect(serverActions.otherAction(222, 123, 0)).rejectedWith('Invalid mod action (123)');
+			await expect(serverActions.otherAction(222, 123 as ModAction, 0)).rejectedWith('Invalid mod action (123)');
 		});
 
 		it('rejects on entityId not a number', async () => {
@@ -950,7 +950,7 @@ describe('ServerActions', () => {
 			setTile(client.map, 1, 2, TileType.Dirt);
 			const setTileStub = stub(world, 'setTile');
 
-			serverActions.changeTile(1, 2, 999);
+			serverActions.changeTile(1, 2, 999 as TileType);
 
 			assert.notCalled(setTileStub);
 			expect(getWriterBuffer(client.updateQueue)).eql(new Uint8Array([]));

src/ts/tests/server/services/notification.spec.ts

@@ -5,6 +5,7 @@ import { stub, spy, assert } from 'sinon';
 import { IClient } from '../../../server/serverInterfaces';
 import { NotificationService } from '../../../server/services/notification';
 import { times } from '../../../common/utils';
+import { NotificationFlags } from '../../../common/interfaces';
 
 describe('NotificationService', () => {
 	let notificationService: NotificationService;
@@ -58,7 +59,7 @@ describe('NotificationService', () => {
 
 			notificationService.addNotification(client, notification);
 
-			assert.calledWith(addNotification, 1, 0, 'name', 'test', 'note', 123);
+			assert.calledWith(addNotification, 1, 0, 'name', 'test', 'note', 123 as NotificationFlags);
 		});
 
 		it('does not add notification to client if limit is reached', () => {