Merge pull request #155 from SakuraIsayeki/angular_upgrade

Update Web App to Angular 17.1

wowskarma.app/package.json

@@ -3,42 +3,42 @@
   "version": "0.17.1",
   "scripts": {
     "ng": "ng",
-    "dev": "ng serve --watch",
+    "dev": "ng serve --watch --ssl true",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.12",
-    "@angular/common": "^14.2.12",
-    "@angular/compiler": "^14.2.12",
-    "@angular/core": "^14.2.12",
-    "@angular/forms": "^14.2.12",
-    "@angular/localize": "^14.2.12",
-    "@angular/platform-browser": "^14.2.12",
-    "@angular/platform-browser-dynamic": "^14.2.12",
-    "@angular/router": "^14.2.12",
-    "@angular/service-worker": "^14.2.12",
-    "@microsoft/applicationinsights-angularplugin-js": "^3.0.0",
-    "@microsoft/applicationinsights-web": "^2.8.9",
-    "@microsoft/signalr": "^6.0.11",
-    "@ng-bootstrap/ng-bootstrap": "^13.1.1",
+    "@angular/animations": "^17.1.1",
+    "@angular/common": "17.1.1",
+    "@angular/compiler": "^17.1.1",
+    "@angular/core": "^17.1.1",
+    "@angular/forms": "^17.1.1",
+    "@angular/localize": "^17.1.1",
+    "@angular/platform-browser": "^17.1.1",
+    "@angular/platform-browser-dynamic": "^17.1.1",
+    "@angular/router": "^17.1.1",
+    "@angular/service-worker": "^17.1.1",
+    "@microsoft/applicationinsights-angularplugin-js": "^15.0.1",
+    "@microsoft/applicationinsights-web": "^3.0.7",
+    "@microsoft/signalr": "^8.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.6",
     "@types/bootstrap": "^5.2.6",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.2",
     "bootswatch": "^5.2.3",
-    "ng-openapi-gen": "^0.23.0",
-    "rxjs": "~7.5.7",
+    "ng-openapi-gen": "^0.51.0",
+    "rxjs": "~7.8.1",
     "tslib": "^2.4.1",
-    "zone.js": "~0.11.8"
+    "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.10",
-    "@angular/cli": "~14.2.10",
-    "@angular/compiler-cli": "^14.2.12",
-    "typescript": "~4.8.4"
+    "@angular-devkit/build-angular": "^17.1.1",
+    "@angular/cli": "~17.1.1",
+    "@angular/compiler-cli": "^17.1.1",
+    "typescript": "~5.3.3"
   }
 }

wowskarma.app/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { ServiceWorkerModule } from "@angular/service-worker";
-import { NgbCollapseModule, NgbPaginationModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbPaginationModule, NgbTooltipModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { ModActionTypeDisplayPipe } from 'src/app/services/pipes/mod-action-type-display.pipe';
 import { AppRoutingModule } from "./app-routing.module";
 import { AppWrapperComponent } from "./app-wrapper.component";
@@ -65,6 +65,7 @@ import { PlayerNamelinkComponent } from './shared/components/player-namelink/pla
 import { ProfileModActionsViewComponent } from './shared/modals/profile-mod-actions-view/profile-mod-actions-view.component';
 import { ProfilePlatformBansViewComponent } from './shared/modals/profile-platform-bans-view/profile-platform-bans-view.component';
 import { UserRolesComponent } from './shared/components/icons/user-roles/user-roles.component';
+import { NgOptimizedImage } from "@angular/common";
 
 @NgModule({
     declarations: [
@@ -135,7 +136,9 @@ import { UserRolesComponent } from './shared/components/icons/user-roles/user-ro
     }),
     NgbCollapseModule,
     NgbPaginationModule,
-    NgbTooltipModule
+    NgbTooltipModule,
+    NgbModule,
+    NgOptimizedImage
   ],
     providers: [
         AuthService,

wowskarma.app/src/app/pages/clan/profile/profile.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
@@ -23,6 +23,8 @@ type ApiModelState<T> = {
 })
 export class ProfileComponent {
   //loaded$ = new BehaviorSubject<boolean>(false);
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private clanService: ClanService = inject(ClanService);
 
   // Get the "ID,username" from the route params.
   profile$: Observable<ApiModelState<ClanProfileFullDto>> = routeParam(this.route, "idNamePair").pipe(
@@ -47,7 +49,7 @@ export class ProfileComponent {
     shareReplayRefCount(1),
   );
 
-  constructor(private route: ActivatedRoute, private clanService: ClanService) {
+  constructor() {
     // Empty subscription to preemptively load the clan profile ahead of view tree.
     // (uses shareReplayRefCount to prevent multiple requests)
     this.profile$.subscribe();

wowskarma.app/src/app/pages/fallbacks/not-found/not-found.component.html

@@ -1,13 +1,15 @@
 <div class="row justify-content-around align-items-center">
   <div class="col-lg-4 order-3 order-lg-1">
-    <img src="../../../../assets/media/akatsuki-torp-oops.png"
-         class="my-5 my-lg-1 mx-lg-5 img-fluid rounded h-50"
-         alt="Oops, Akatsuki messed up her salvo."
-         title="Oops, Akatsuki messed up her salvo.">
+    <img
+      ngSrc="../../../../assets/media/akatsuki-torp-oops.png" fill
+      class="position-static my-5 my-lg-1 mx-lg-5 h-50"
+      alt="Oops, Akatsuki messed up her salvo."
+      title="Oops, Akatsuki messed up her salvo."
+    >
   </div>
 
   <div class="col-lg-8 text-center order-1 order-lg-3">
     <h1 class="display-1">404</h1>
-    <h3 class="text-warning">{{message}}</h3>
+    <h3 class="text-warning">{{message()}}</h3>
   </div>
 </div>

wowskarma.app/src/app/pages/fallbacks/not-found/not-found.component.ts

@@ -1,12 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
-  styleUrls: ['./not-found.component.scss']
+  styleUrls: ['./not-found.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NotFoundComponent {
-  @Input() message = 'Sorry, there\'s nothing at this address.';
-
-  constructor() { }
+  message = input("Sorry, there's nothing at this address.");
 }