feat(web)!: Everything stands alone.

Refactored the quasi-entirety of the Angular application to the new standalone components approach, to mitigate module hell.

So far everything looks in order, except for the Modals.
Will fix in further commits.

wowskarma.app/src/app/app-routing.module.ts

@@ -18,7 +18,7 @@ import { AuthGuard } from "./services/guards/auth.guard";
 import { HtmlLoaderComponent } from "./shared/components/html-loader/html-loader.component";
 import { LayoutComponent } from "./shared/layout/layout.component";
 
-const routes: Routes = [
+export const routes: Routes = [
   // Set defaults for the app.
   {
     path: "",
@@ -81,10 +81,3 @@ const routes: Routes = [
     ],
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {
-}

wowskarma.app/src/app/app-wrapper.component.html

@@ -1,8 +1,8 @@
 <ng-container *ngIf="appInit.isInitialized$ | async as initialized">
   <div class="app-loading-wrapper" *ngIf="!initialized">
-    <img alt="App Loading Logo" id="app-init-logo-light" class="app-loading-logo" src="../assets/logos/rci-logo-light.svg"/>
-    <img alt="App Loading Logo" id="app-init-logo-dark" class="app-loading-logo" src="../assets/logos/rci-logo-dark.svg"/>
+<!--     <img alt="App Loading Logo" id="app-init-logo-light" class="app-loading-logo" src="../assets/logos/rci-logo-light.svg"/> -->
+<!--     <img alt="App Loading Logo" id="app-init-logo-dark" class="app-loading-logo" src="..k/assets/logos/rci-logo-dark.svg"/> -->
   </div>
 </ng-container>
 
-<router-outlet></router-outlet>
+<router-outlet />

wowskarma.app/src/app/app-wrapper.component.ts

@@ -1,13 +1,19 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { AppInitService } from "./services/app-init.service";
+import { RouterOutlet } from "@angular/router";
+import { AsyncPipe, NgIf } from "@angular/common";
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   templateUrl: './app-wrapper.component.html',
+  imports: [
+    RouterOutlet,
+    AsyncPipe,
+    NgIf
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppWrapperComponent {
-
-  constructor(public appInit: AppInitService) {
-  }
+  constructor(public appInit: AppInitService) { }
 }

wowskarma.app/src/app/app.component.ts

@@ -1,12 +1,15 @@
 import { Component } from "@angular/core";
-import { ActivatedRouteSnapshot, ResolveEnd, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, ResolveEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { AppInitService } from "./services/app-init.service";
 import { AppInsightsService } from "./services/app-insights.service";
 
 @Component({
-  template: "<router-outlet></router-outlet>",
-
+  standalone: true,
+  template: "<router-outlet />",
+  imports: [
+    RouterOutlet
+  ]
 })
 export class AppComponent {
   constructor(

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

@@ -34,14 +34,14 @@ <h1 id="clan-name" class="mb-5">
         <h2>Clan Metrics</h2>
 
         <div class="row justify-content-center my-5">
-          <div class="col"><minmax-metric [metric]="clanMetrics['game']" name="In-Game Karma"></minmax-metric></div>
-          <div class="col"><minmax-metric [metric]="clanMetrics['platform']" name="Platform Karma"></minmax-metric></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['game']" name="In-Game Karma" /></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['platform']" name="Platform Karma" /></div>
         </div>
 
         <div class="row justify-content-center my-5">
-          <div class="col"><minmax-metric [metric]="clanMetrics['performance']" name="Performance"></minmax-metric></div>
-          <div class="col"><minmax-metric [metric]="clanMetrics['teamplay']" name="Teamplay"></minmax-metric></div>
-          <div class="col"><minmax-metric [metric]="clanMetrics['courtesy']" name="Courtesy"></minmax-metric></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['performance']" name="Performance" /></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['teamplay']" name="Teamplay" /></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['courtesy']" name="Courtesy" /></div>
         </div>
       </div>
     </div>
@@ -64,7 +64,7 @@ <h2>Clan Metrics</h2>
 
       <tbody>
         <tr *ngFor="let member of clan.members!.sort(sortByRankThenJoinDate)">
-          <td><icon-clan-rank [clanRank]="member.clan!.clanMemberRole"></icon-clan-rank></td>
+          <td><icon-clan-rank [clanRank]="member.clan!.clanMemberRole" /></td>
           <td><a [routerLink]="['/player', member.id + ',' + member.username]">{{member.username}}</a></td>
           <td class="small">{{member.wgAccountCreatedAt | date:"short"}}</td>
           <td class="small">{{member.clan!.joinedClanAt | date:"short"}}</td>
@@ -81,7 +81,7 @@ <h2>Clan Metrics</h2>
 </ng-container>
 
 <ng-template #notFound>
-  <app-not-found message="Sorry, no clan was found."></app-not-found>
+  <app-not-found message="Sorry, no clan was found." />
 </ng-template>
 
 <ng-template #loading>

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

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, RouterLink } from "@angular/router";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 import { ClanProfileFullDto } from "src/app/services/api/models/clan-profile-full-dto";
@@ -8,8 +8,15 @@ import { ClanListingDto } from "src/app/services/api/models/clan-listing-dto";
 import { ClanRole } from "src/app/services/api/models/clan-role";
 import { PlayerProfileDto } from "src/app/services/api/models/player-profile-dto";
 import { ClanService } from "src/app/services/api/services/clan.service";
-import { MinMaxMetricObject } from "src/app/shared/components/minmax-metric/min-max-metric.component";
+import { MinMaxMetricComponent, MinMaxMetricObject } from "src/app/shared/components/minmax-metric/min-max-metric.component";
 import { mapApiModelState, routeParam, shareReplayRefCount } from "src/app/shared/rxjs-operators";
+import { AsyncPipe, DatePipe, NgForOf, NgIf } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { WowsNumbersClanLinkPipe } from "../../../services/pipes/wows-numbers-clan-link.pipe";
+import { KarmaColorPipe } from "../../../services/pipes/karma-color.pipe";
+import { ClanRankComponent } from "../../../shared/components/icons/clan-rank/clan-rank.component";
+import { NotFoundComponent } from "../../fallbacks/not-found/not-found.component";
+import { ColorHexPipe } from "../../../services/pipes/colorHex.pipe";
 
 type ApiModelState<T> = {
   notFound?: true,
@@ -18,8 +25,23 @@ type ApiModelState<T> = {
 
 
 @Component({
+  standalone: true,
   templateUrl: "./profile.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe,
+    NgIf,
+    MarkdownComponent,
+    DatePipe,
+    WowsNumbersClanLinkPipe,
+    MinMaxMetricComponent,
+    KarmaColorPipe,
+    ClanRankComponent,
+    RouterLink,
+    NotFoundComponent,
+    ColorHexPipe,
+    NgForOf
+  ]
 })
 export class ProfileComponent {
   //loaded$ = new BehaviorSubject<boolean>(false);

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

@@ -1,12 +1,23 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { BehaviorSubject, debounceTime, distinctUntilChanged, tap } from "rxjs";
 import { map } from "rxjs/operators";
 import { ClanService } from "../../../services/api/services/clan.service";
 import { filterNotNull, switchMapCatchError, tapAny } from "../../../shared/rxjs-operators";
+import { AsyncPipe, NgForOf } from "@angular/common";
+import { ColorHexPipe } from "../../../services/pipes/colorHex.pipe";
+import { RouterLink } from "@angular/router";
 
 @Component({
+  standalone: true,
   templateUrl: "./search.component.html",
+  imports: [
+    ReactiveFormsModule,
+    AsyncPipe,
+    ColorHexPipe,
+    RouterLink,
+    NgForOf
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SearchComponent {

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

@@ -1,9 +1,14 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgOptimizedImage } from "@angular/common";
 
 @Component({
+  standalone: true,
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.scss'],
+  imports: [
+    NgOptimizedImage
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NotFoundComponent {