Replace ChildComponent with DestroyRef + takeUntilDestroyed

CLAUDE.md

@@ -14,6 +14,10 @@ npm run build:prod   # production build
 npm run lint         # eslint
 ```
 
+## IMPORTANT NOTES
+
+ALWAYS bump the version in package.json for each new PR. If the bungie manifest version changes, also bump package.json's "manifest" value. These two values are used to bust caches on browser clients, if not bumped the clients won't see the new values.
+
 ## Project structure
 
 - `src/app/` - Angular application source

docs/modernization-plan.md

@@ -130,7 +130,12 @@ Angular migrations must go one major version at a time:
 
 ### 7c: Post-migration modernization
 - [ ] Migrate key components to standalone (remove NgModule boilerplate)
-- [ ] Replace `ChildComponent` base class with `DestroyRef` + `takeUntilDestroyed`
+- [x] Replace `ChildComponent` base class with `DestroyRef` + `takeUntilDestroyed`
+  - Created `AppStateService` for shared state (debugmode, disableAds, favorites, hiddenMilestones)
+  - `ChildComponent` now uses `inject()` — no constructor params, delegates to `AppStateService`
+  - Replaced `takeUntil(this.unsubscribe$)` with `takeUntilDestroyed(this.destroyRef)` in 40+ components
+  - Removed `unsubscribe$` from 7 root services (singletons never destroy)
+  - Deleted unused `StreamingChildComponent`
 - [ ] Adopt Angular signals where beneficial
 - [ ] Evaluate esbuild-based builder (`@angular-devkit/build-angular:application`)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2-checklist",
-  "version": "29.0.2",
+  "version": "29.1.0",
   "manifest": "242999.26.03.25.2000-1-bnet.64463",
   "license": "MIT",
   "scripts": {

src/app/about/about/about.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { IconService } from '@app/service/icon.service';
-import { StorageService } from '../../service/storage.service';
 import { ChildComponent } from '../../shared/child.component';
 
 @Component({
@@ -10,8 +9,8 @@ import { ChildComponent } from '../../shared/child.component';
   styleUrls: ['./about.component.scss']
 })
 export class AboutComponent extends ChildComponent {
-  constructor(storageService: StorageService, public iconService: IconService) {
-    super(storageService);
+  constructor(public iconService: IconService) {
+    super();
   }
 
 }

src/app/app.component.ts

@@ -1,12 +1,12 @@
 
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, HostListener, Inject, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, HostBinding, HostListener, Inject, inject, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { environment as env } from '@env/environment';
-import { BehaviorSubject, Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { AuthService } from './service/auth.service';
 import { DestinyCacheService } from './service/destiny-cache.service';
 import { IconService } from './service/icon.service';
@@ -17,6 +17,7 @@
 import { StorageService } from './service/storage.service';
 import { getDefaultTheme } from './shared/utilities';
 import { Location } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 
 @Component({
@@ -25,8 +26,8 @@
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
-  private unsubscribe$: Subject<void> = new Subject<void>();
+export class AppComponent implements OnInit, AfterViewInit {
+  private destroyRef = inject(DestroyRef);
   navigating$: BehaviorSubject<boolean> = new BehaviorSubject(false);
   private lastPath$: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);
 
@@ -44,7 +45,7 @@
   public debugmode: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
 
   deferredPrompt: any;
 
   constructor(
     public signedOnUserService: SignedOnUserService,
@@ -69,7 +70,7 @@
     this.logon(false);
 
     this.storageService.settingFeed.pipe(
-      takeUntil(this.unsubscribe$))
+      takeUntilDestroyed(this.destroyRef))
       .subscribe(
         x => {
           if (x.theme != null) {
@@ -90,7 +91,7 @@
         });
 
     this.notificationService.notifyFeed.pipe(
-      takeUntil(this.unsubscribe$))
+      takeUntilDestroyed(this.destroyRef))
       .subscribe(
         x => {
           if (x.mode === 'success') {
@@ -138,7 +139,7 @@
     this.deferredPrompt.prompt();
     // Wait for the user to respond to the prompt
     this.deferredPrompt.userChoice
       .then((choiceResult: any) => {
         if (choiceResult.outcome === 'accepted') {
           console.log('User accepted the A2HS prompt');
         } else {
@@ -184,7 +185,7 @@
   }
 
   ngOnInit(): void {
-    this.signedOnUserService.signedOnUser$.pipe(takeUntil(this.unsubscribe$)).subscribe((selectedUser: SelectedUser | null) => {
+    this.signedOnUserService.signedOnUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((selectedUser: SelectedUser | null) => {
       this.signedOnUser.next(selectedUser);
       if (selectedUser == null) { return; }
       if (selectedUser.promptForPlatform === true) {
@@ -195,7 +196,7 @@
 
     this.router.events.pipe(
       filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-      takeUntil(this.unsubscribe$))
+      takeUntilDestroyed(this.destroyRef))
       .subscribe(
         (navEnd: NavigationEnd) => {
           try {
@@ -221,7 +222,7 @@
               uri: path,
               disabled_ads: this.disableads
             };
             (<any>window).dataLayer.push(event);
           } catch (err) {
             console.dir(err);
           }
@@ -230,25 +231,20 @@
   }
 
   ngAfterViewInit(): void {
     if ((window as any)['NitroPayCCPA']) {
       (window as any)['NitroPayCCPA'].init();
     }
     if ((window as any)['__cmp']) {
       (window as any)['__cmp']('addConsentLink');
     }
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribe$.next();
-    this.unsubscribe$.complete();
-  }
-
   logon(force: boolean) {
     this.authService.getCurrentMemberId(force);
     this.ref.markForCheck();
   }
 
   selectUser(user: any) {
     this.signedOnUserService.selectUser(user);
     this.ref.markForCheck();
   }
@@ -272,7 +268,7 @@
 })
 export class SuccessSnackbarComponent {
   message: string;
   constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
     this.message = data.message;
   }
 }
@@ -284,7 +280,7 @@
 })
 export class InfoSnackbarComponent {
   message: string;
   constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
     this.message = data.message;
   }
 }

src/app/auth/auth/auth.component.ts

@@ -1,10 +1,10 @@
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
 import { AuthService } from '../../service/auth.service';
-import { StorageService } from '../../service/storage.service';
 import { ChildComponent } from '../../shared/child.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 
 @Component({
@@ -13,14 +13,14 @@ import { ChildComponent } from '../../shared/child.component';
   templateUrl: './auth.component.html',
   styleUrls: ['./auth.component.scss']
 })
-export class AuthComponent extends ChildComponent implements OnInit, OnDestroy {
+export class AuthComponent extends ChildComponent implements OnInit {
   statusMsg = 'Authorizing';
   errMsg: string | null = null;
 
   constructor(
-    storageService: StorageService, private authService: AuthService,
+    private authService: AuthService,
     private route: ActivatedRoute, private router: Router) {
-    super(storageService);
+    super();
   }
 
   async fetch(code: string, state: string) {
@@ -45,7 +45,7 @@ export class AuthComponent extends ChildComponent implements OnInit, OnDestroy {
 
 
   ngOnInit() {
-    this.route.queryParams.pipe(takeUntil(this.unsubscribe$)).subscribe(queryParams => {
+    this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(queryParams => {
       const code: string = queryParams['code'];
       const state: string = queryParams['state'];
       this.fetch(code, state);

src/app/bungie-search/bungie-search/bungie-search.component.ts

@@ -1,13 +1,13 @@
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BungieService } from '../../service/bungie.service';
 import { BungieMemberPlatform, BungieGlobalSearchResult, Const } from '../../service/model';
-import { StorageService } from '../../service/storage.service';
 import { ChildComponent } from '../../shared/child.component';
 import { IconService } from '@app/service/icon.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 
 @Component({
@@ -16,17 +16,17 @@ import { IconService } from '@app/service/icon.service';
   templateUrl: './bungie-search.component.html',
   styleUrls: ['./bungie-search.component.scss']
 })
-export class BungieSearchComponent extends ChildComponent implements OnInit, OnDestroy {
+export class BungieSearchComponent extends ChildComponent implements OnInit {
   Const = Const;
   routedName!: string;
   name!: string;
   public rows$: BehaviorSubject<BungieGlobalSearchResult[] | null> = new BehaviorSubject<BungieGlobalSearchResult[] | null>(null);
 
-  constructor(storageService: StorageService, private bungieService: BungieService,
+  constructor(private bungieService: BungieService,
     public iconService: IconService,
     private route: ActivatedRoute, public router: Router,
     private ref: ChangeDetectorRef) {
-    super(storageService);
+    super();
   }
 
   public async loadClan(member: BungieGlobalSearchResult) {
@@ -66,7 +66,7 @@ export class BungieSearchComponent extends ChildComponent implements OnInit, OnD
   }
 
   ngOnInit() {
-    this.route.params.pipe(takeUntil(this.unsubscribe$)).subscribe(params => {
+    this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
       this.routedName = params['name'];
       this.name = params['name'];
       if (this.name != null) {

src/app/clan-search/clan-search/clan-search.component.ts

@@ -1,9 +1,8 @@
 
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { BungieService } from '../../service/bungie.service';
 import { ClanInfo } from '../../service/model';
-import { StorageService } from '../../service/storage.service';
 import { ChildComponent } from '../../shared/child.component';
 
 
@@ -13,13 +12,12 @@ import { ChildComponent } from '../../shared/child.component';
   templateUrl: './clan-search.component.html',
   styleUrls: ['./clan-search.component.scss']
 })
-export class ClanSearchComponent extends ChildComponent implements OnInit, OnDestroy {
+export class ClanSearchComponent extends ChildComponent implements OnInit {
   name!: string;
   public clan: BehaviorSubject<ClanInfo | null> = new BehaviorSubject<ClanInfo | null>(null);
 
-  constructor(storageService: StorageService,
-    private bungieService: BungieService) {
-    super(storageService);
+  constructor(private bungieService: BungieService) {
+    super();
   }
   search() {
     this.load();

src/app/clan/clan-collections/clan-badges/clan-badges.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { ClanBadge, ClanStateService } from '@app/clan/clan-state.service';
-import { StorageService } from '@app/service/storage.service';
 import { ChildComponent } from '@app/shared/child.component';
 import { ClanCollectionBadgeDialogComponent } from '../clan-collection-badge-dialog/clan-collection-badge-dialog.component';
 
@@ -13,10 +12,9 @@ import { ClanCollectionBadgeDialogComponent } from '../clan-collection-badge-dia
 })
 export class ClanBadgesComponent extends ChildComponent {
 
-  constructor(storageService: StorageService,
-    public state: ClanStateService,
+  constructor(public state: ClanStateService,
     public dialog: MatDialog) {
-    super(storageService);
+    super();
   }
 
   public openBadgeDialog(badge: ClanBadge): void {

src/app/clan/clan-collections/clan-collection-badge-dialog/clan-collection-badge-dialog.component.ts

@@ -3,7 +3,6 @@ import { MatDialogRef, MAT_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/mater
 import { ClanBadge, ClanStateService } from '@app/clan/clan-state.service';
 import { IconService } from '@app/service/icon.service';
 import { Sort } from '@app/service/model';
-import { StorageService } from '@app/service/storage.service';
 import { ChildComponent } from '@app/shared/child.component';
 
 
@@ -20,11 +19,10 @@ export class ClanCollectionBadgeDialogComponent  extends ChildComponent {
   };
 
   constructor(
-    storageService: StorageService,
     public iconService: IconService,
     public dialogRef: MatDialogRef<ClanCollectionBadgeDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public badge: ClanBadge) {
-    super(storageService);
+    super();
     ClanStateService.sortBadges(this.badge, this.sort);
   }
 

src/app/clan/clan-collections/clan-collection-item-dialog/clan-collection-item-dialog.component.ts

@@ -3,7 +3,6 @@ import { MatDialogRef, MAT_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/mater
 import { ClanSearchableCollection, ClanStateService } from '@app/clan/clan-state.service';
 import { IconService } from '@app/service/icon.service';
 import { Sort } from '@app/service/model';
-import { StorageService } from '@app/service/storage.service';
 import { ChildComponent } from '@app/shared/child.component';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,11 +17,10 @@ export class ClanCollectionItemDialogComponent extends ChildComponent {
   };
 
   constructor(
-    storageService: StorageService,
     public iconService: IconService,
     public dialogRef: MatDialogRef<ClanCollectionItemDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public item: ClanSearchableCollection) {
-    super(storageService);
+    super();
     ClanStateService.sortCollectibles(this.item, this.sort);
   }
 

src/app/clan/clan-collections/clan-collection-item/clan-collection-item.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { ClanSearchableCollection, ClanStateService } from '@app/clan/clan-state.service';
-import { StorageService } from '@app/service/storage.service';
 import { ChildComponent } from '@app/shared/child.component';
 import { ClanCollectionItemDialogComponent } from '../clan-collection-item-dialog/clan-collection-item-dialog.component';
 
@@ -18,9 +17,9 @@ export class ClanCollectionItemComponent extends ChildComponent {
   item!: ClanSearchableCollection;
 
 
-  constructor(storageService: StorageService, public state: ClanStateService,
+  constructor(public state: ClanStateService,
     public dialog: MatDialog) {
-    super(storageService);
+    super();
   }
 
   public openDialog(item: ClanSearchableCollection): void {

src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ClanSearchableTriumph, ClanStateService } from '@app/clan/clan-state.service';
-import { StorageService } from '@app/service/storage.service';
 import { ChildComponent } from '@app/shared/child.component';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -16,18 +16,18 @@ export class ClanCollectionSearchComponent extends ChildComponent implements OnI
   public collectionFilterText: string | null = null;
   public filteredCollection: BehaviorSubject<ClanSearchableTriumph[]> = new BehaviorSubject<ClanSearchableTriumph[]>([]);
 
-  constructor(storageService: StorageService, public state: ClanStateService) {
-    super(storageService);
+  constructor(public state: ClanStateService) {
+    super();
     this.collectionFilterText = localStorage.getItem('collection-filter');
   }
 
   ngOnInit() {
     this.state.searchableTriumphs.pipe(
-      takeUntil(this.unsubscribe$)).subscribe(p => {
+      takeUntilDestroyed(this.destroyRef)).subscribe(p => {
         this.filterTriumphs();
       });
     this.collectionSearchSubject.pipe(
-      takeUntil(this.unsubscribe$),
+      takeUntilDestroyed(this.destroyRef),
       debounceTime(50))
       .subscribe(() => {
         const saveMe = this.collectionFilterText == null ? null : this.collectionFilterText.toLowerCase();

src/app/clan/clan-collections/clan-collections.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { IconService } from '@app/service/icon.service';
-import { StorageService } from '@app/service/storage.service';
 import { ChildComponent } from '@app/shared/child.component';
 import { ClanStateService } from '../clan-state.service';
 
@@ -12,8 +11,8 @@ import { ClanStateService } from '../clan-state.service';
 })
 export class ClanCollectionsComponent extends ChildComponent {
 
-  constructor(storageService: StorageService, public state: ClanStateService, public iconService: IconService) {
-    super(storageService);
+  constructor(public state: ClanStateService, public iconService: IconService) {
+    super();
   }
 
 }