upgrade to angular v17.

change injection for more idiomatic angular
SakuraIsayeki · Jan 28, 2024 · 86a8f45 · 86a8f45
1 parent 3ff1602
commit 86a8f45
Show file tree

Hide file tree

Showing 21 changed files with 101 additions and 91 deletions.
diff --git a/wowskarma.app/package.json b/wowskarma.app/package.json
@@ -11,34 +11,34 @@
   },
   "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"
   }
 }
diff --git a/wowskarma.app/src/app/app.module.ts b/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";
@@ -135,7 +135,8 @@ import { UserRolesComponent } from './shared/components/icons/user-roles/user-ro
     }),
     NgbCollapseModule,
     NgbPaginationModule,
-    NgbTooltipModule
+    NgbTooltipModule,
+    NgbModule
   ],
     providers: [
         AuthService,

diff --git a/wowskarma.app/src/app/pages/clan/profile/profile.component.ts b/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();

diff --git a/wowskarma.app/src/app/pages/player/profile/profile.component.ts b/wowskarma.app/src/app/pages/player/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 { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { BehaviorSubject, combineLatest, merge, of, Subject, tap } from "rxjs";
@@ -21,6 +21,14 @@ import { ProfileService } from "../../../services/api/services/profile.service";
 
 export class ProfileComponent {
   // Get the "ID,username" from the route params.
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private playerService: PlayerService = inject(PlayerService);
+  private profileService: ProfileService = inject(ProfileService);
+  public authService: AuthService = inject(AuthService);
+  private modActionsService: ModActionService = inject(ModActionService);
+  private platformBansService: PlatformBansService = inject(PlatformBansService);
+  private modalService: NgbModal = inject(NgbModal);
+
   request$ = routeParam(this.route, "idNamePair")
     .pipe(
       map(idNamePair => parseInt(idNamePair?.split(",")[0]!)),
@@ -67,17 +75,6 @@ export class ProfileComponent {
       map(profile => profile?.optedOut ? "sent" : "received")),
   ).pipe(shareReplayRefCount(1));
 
-  constructor(
-    private route: ActivatedRoute,
-    private playerService: PlayerService,
-    private profileService: ProfileService,
-    public authService: AuthService,
-    private modActionsService: ModActionService,
-    private platformBansService: PlatformBansService,
-    private modalService: NgbModal,
-  ) {
-  }
-
   get isCurrentUserCM() {
     return this.authService.isInRole('mod');
   }

diff --git a/wowskarma.app/src/app/pages/post/list/list-latest.component.ts b/wowskarma.app/src/app/pages/post/list/list-latest.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { BehaviorSubject, combineLatest, Observable, of } from "rxjs";
 import { map, debounceTime, distinctUntilChanged, shareReplay, startWith, tap } from "rxjs/operators";
@@ -17,6 +17,11 @@ export declare type PostChange = { mode: "new" | "edited" | "deleted", post: Has
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListLatestComponent {
+  public authService: AuthService = inject(AuthService);
+  private postService: PostService = inject(PostService);
+  private formBuilder: FormBuilder = inject(FormBuilder)
+  private postsHubService: PostsHub = inject(PostsHub);
+
   listFilters = this.formBuilder.group<ListFilters>({
     count: 10,
     hideModActions: false,
@@ -75,10 +80,6 @@ export class ListLatestComponent {
     mergeAndCache(this.postChanges$, this.merge)
   );
 
-  constructor(public authService: AuthService, private postService: PostService, private formBuilder: FormBuilder, private postsHubService: PostsHub) {
-
-  }
-
   private merge(array: PlayerPostDto[], postChange: PostChange) {
     if (postChange.mode == "new" && !array.find(a => a.id == postChange.post.id)) {
       array = [postChange.post, ...array];

diff --git a/wowskarma.app/src/app/pages/post/view/view-post.component.ts b/wowskarma.app/src/app/pages/post/view/view-post.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from "@angular/core";
+import {ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit} from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { BehaviorSubject, combineLatestWith, debounce, debounceTime, distinct, distinctUntilChanged, merge, Subscription, tap, withLatestFrom } from "rxjs";
 import { filter, map } from "rxjs/operators";
@@ -13,6 +13,11 @@ import { filterNotNull, mapApiModelState, reloadWhen, routeParam, shareReplayRef
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ViewPostComponent implements  OnDestroy {
+    private route: ActivatedRoute = inject(ActivatedRoute);
+    private postService: PostService = inject(PostService);
+    private modActionService: ModActionService = inject(ModActionService);
+    private postsHub: PostsHub = inject(PostsHub);
+
     shouldRefresh$ = new BehaviorSubject<void | null>(null);
 
     request$ = routeParam(this.route).pipe(
@@ -50,8 +55,7 @@ export class ViewPostComponent implements  OnDestroy {
 
     private onChangesSubscription: Subscription;
 
-    constructor(private route: ActivatedRoute, private postService: PostService, private modActionService: ModActionService,
-      private postsHub: PostsHub) {
+    constructor() {
         this.onChangesSubscription = this.onChanges$.subscribe();
     }
 

diff --git a/wowskarma.app/src/app/pages/settings/settings.component.ts b/wowskarma.app/src/app/pages/settings/settings.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { BehaviorSubject } from "rxjs";
@@ -13,6 +13,11 @@ import { SeedTokenChangeComponent } from "../../shared/modals/seed-token-change/
     changeDetection: ChangeDetectionStrategy.Default,
 })
 export class SettingsComponent {
+    public authService: AuthService = inject(AuthService);
+    private profileService: ProfileService = inject(ProfileService);
+    private formBuilder: FormBuilder = inject(FormBuilder);
+    private modalService: NgbModal = inject(NgbModal);
+
     changesSaved$ = new BehaviorSubject(false);
     copiedTokenToClipboard$ = new BehaviorSubject(false);
     optOutOnCooldown$ = this.authService.profileFlags$.pipe(
@@ -31,12 +36,7 @@ export class SettingsComponent {
         optedOut: false,
     });
 
-    constructor(
-        public authService: AuthService,
-        private profileService: ProfileService,
-        private formBuilder: FormBuilder,
-        private modalService: NgbModal,
-    ) {
+    constructor() {
         this.authService.profileFlags$.subscribe((profileFlags) => {
             if (profileFlags) {
                 this.form.patchValue(profileFlags);
@@ -69,4 +69,4 @@ export class SettingsComponent {
     toDateObject(dateNumber: number) {
         return new Date(dateNumber);
     }
-}
+}
diff --git a/wowskarma.app/src/app/services/api/api-configuration.ts b/wowskarma.app/src/app/services/api/api-configuration.ts
@@ -1,6 +1,6 @@
 /* tslint:disable */
 /* eslint-disable */
-import {Inject, Injectable} from '@angular/core';
+import {inject, Inject, Injectable} from '@angular/core';
 import { environment } from 'src/environments/environment';
 import {AppConfigService} from "../app-config.service";
 
@@ -11,10 +11,7 @@ import {AppConfigService} from "../app-config.service";
   providedIn: 'root',
 })
 export class ApiConfiguration {
-  constructor(
-    @Inject(AppConfigService) private appConfig: AppConfigService
-  ) { }
-
+  private appConfig: AppConfigService = inject(AppConfigService);
   rootUrl: string = environment.apiHost[this.appConfig.currentRegion];
 }
 

diff --git a/wowskarma.app/src/app/services/guards/app-init.guard.ts b/wowskarma.app/src/app/services/guards/app-init.guard.ts
@@ -1,11 +1,11 @@
 import { Injectable, Injector } from "@angular/core";
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot, UrlTree } from "@angular/router";
+import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router";
 import { combineLatest, first, Observable, of, take } from "rxjs";
 import { map } from "rxjs/operators";
 import { AuthService } from "../auth.service";
 
 @Injectable()
-export class AppInitGuard implements CanActivate, CanActivateChild {
+export class AppInitGuard  {
 
 
   constructor(private authService: AuthService) {

diff --git a/wowskarma.app/src/app/services/guards/auth.guard.ts b/wowskarma.app/src/app/services/guards/auth.guard.ts
@@ -1,11 +1,11 @@
 import { Injectable } from "@angular/core";
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot, UrlTree } from "@angular/router";
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from "@angular/router";
 import { combineLatestWith, Observable, of, switchMap, tap } from "rxjs";
 import { combineLatest, filter } from "rxjs/operators";
 import { AuthService } from "../auth.service";
 
 @Injectable()
-export class AuthGuard implements CanActivate, CanActivateChild {
+export class AuthGuard  {
 
   constructor(private authService: AuthService,
     private router: Router) {

diff --git a/wowskarma.app/src/app/shared/components/html-loader/html-loader.component.ts b/wowskarma.app/src/app/shared/components/html-loader/html-loader.component.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from "@angular/common/http";
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, Input } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 import { ActivatedRoute } from "@angular/router";
 import { mergeMap, Observable, merge, switchMap, shareReplay } from "rxjs";
@@ -17,14 +17,14 @@ export class HtmlLoaderComponent {
     path!: string;
     path$!: Observable<string>
 
+    private http: HttpClient = inject(HttpClient);
+    private route: ActivatedRoute = inject(ActivatedRoute);
+    private sanitizer: DomSanitizer = inject(DomSanitizer);
 
     // Get the HTML content from the server, at the path specified by the path$ input.
     content$ = merge(this.path$.pipe(filterNotNull()), this.route.data.pipe(map(d => d["path"]), filterNotNull())).pipe(
         switchMap(path => this.http.get(path, { responseType: "text" })),
         map(html => this.sanitizer.bypassSecurityTrustHtml(html)),
         shareReplay(1),
     );
-
-
-    constructor(private http: HttpClient, private route: ActivatedRoute, private sanitizer: DomSanitizer) { }
 }
diff --git a/wowskarma.app/src/app/shared/layout/footer/footer.component.ts b/wowskarma.app/src/app/shared/layout/footer/footer.component.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import {Component, inject} from "@angular/core";
 import { map } from 'rxjs/operators';
 import { AuthService } from 'src/app/services/auth.service';
 import { anyTrue, shareReplayRefCount } from 'src/app/shared/rxjs-operators';
@@ -13,13 +13,12 @@ import { AppConfigService } from "src/app/services/app-config.service";
 })
 export class FooterComponent {
 
+  public appConfig: AppConfigService = inject(AppConfigService);
+  public authService: AuthService = inject(AuthService);
 
   public currentRegion: ApiRegion | undefined = AppConfigService.GetApiRegionFromLocation();
   public currentApiHost: string = environment.apiHost[this.appConfig.currentRegion];
 
-  constructor(public appConfig: AppConfigService, public authService: AuthService) {
-  }
-
   isAdmin$ = this.authService.userInfo$.pipe(
     map(user => !!(user?.roles && user.roles.includes("admin"))),
     shareReplayRefCount(1)

diff --git a/wowskarma.app/src/app/shared/layout/layout.component.ts b/wowskarma.app/src/app/shared/layout/layout.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import { AppConfigService } from "../../services/app-config.service";
 
 @Component({
@@ -7,7 +7,6 @@ import { AppConfigService } from "../../services/app-config.service";
   styleUrls: ['./layout.component.scss']
 })
 export class LayoutComponent {
+  private appConfigService: AppConfigService = inject(AppConfigService);
   currentRegion: string = this.appConfigService.currentRegion;
-
-  constructor(private appConfigService: AppConfigService) { }
 }
diff --git a/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.ts b/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
 import { NavigationEnd, Router } from "@angular/router";
 import { shareReplay, startWith } from "rxjs";
 import { filter, map } from "rxjs/operators";
@@ -10,14 +10,13 @@ import { AuthService } from "src/app/services/auth.service";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavAuthComponent {
+  public authService: AuthService = inject(AuthService);
+  private router: Router = inject(Router);
+
   currentRelativePath$ = this.router.events.pipe(
     filter(e => e instanceof NavigationEnd),
     map(() => this.router.url),
     startWith(this.router.url),
     shareReplay(1)
   );
-
-  constructor(public authService: AuthService, private router: Router) {
-
-  }
 }
diff --git a/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.ts b/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ModActionType, PostModActionDto } from 'src/app/services/api/models';
 import { PlayerPostDto } from 'src/app/services/api/models/player-post-dto';
@@ -15,9 +15,10 @@ import { PlayerPostEditorDto, PostEditorComponent } from 'src/app/shared/modals/
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PostModEditorComponent extends PostEditorComponent {
-  @Input() override post!: ModPostEditorDto;
+  @Input() override post: ModPostEditorDto = new ModPostEditorDto();
 
-  constructor(postService: PostService, private modActionService: ModActionService) {
+  private modActionService: ModActionService = inject(ModActionService);
+  constructor(postService: PostService) {
     super(postService);
   }