activated typescript strict mode

src/app/modules/shows/show/show.component.ts

@@ -23,11 +23,11 @@ import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers';
   styleUrls: ['./show.component.less'],
 })
 export class ShowComponent implements OnInit {
-  public show$: Observable<Show>;
-  public songs: Song[];
-  public showSongs: ShowSong[];
-  public showId: string;
-  public showText: boolean;
+  public show$: Observable<Show | null> | null = null;
+  public songs: Song[] | null = null;
+  public showSongs: ShowSong[] | null = null;
+  public showId: string | null = null;
+  public showText = false;
 
   public faBox = faBox;
   public faBoxOpen = faBoxOpen;
@@ -47,13 +47,15 @@ export class ShowComponent implements OnInit {
 
   public ngOnInit(): void {
     this.show$ = this.activatedRoute.params.pipe(
-      map((param: {showId: string}) => param.showId),
+      map(param => param as {showId: string}),
+      map(param => param.showId),
       tap((_: string) => (this.showId = _)),
       switchMap((showId: string) => this.showService.read$(showId))
     );
     this.activatedRoute.params
       .pipe(
-        map((param: {showId: string}) => param.showId),
+        map(param => param as {showId: string}),
+        map(param => param.showId),
         switchMap(showId => this.showSongService.list$(showId)),
         filter(_ => !!_)
       )
@@ -64,17 +66,18 @@ export class ShowComponent implements OnInit {
       .subscribe(_ => (this.songs = _));
   }
 
-  public getSong(songId: string): Song {
+  public getSong(songId: string): Song | null {
+    if (!this.songs) return null;
     const filtered = this.songs.filter(_ => _.id === songId);
     return filtered.length > 0 ? filtered[0] : null;
   }
 
   public async onArchive(archived: boolean): Promise<void> {
-    await this.showService.update$(this.showId, {archived});
+    if (this.showId != null) await this.showService.update$(this.showId, {archived});
   }
 
   public async onPublish(published: boolean): Promise<void> {
-    await this.showService.update$(this.showId, {published});
+    if (this.showId != null) await this.showService.update$(this.showId, {published});
   }
 
   public getStatus(show: Show): string {
@@ -88,13 +91,14 @@ export class ShowComponent implements OnInit {
   }
 
   public async onDownload(): Promise<void> {
-    await this.docxService.create(this.showId);
+    if (this.showId != null) await this.docxService.create(this.showId);
   }
 
   public async onDownloadHandout(): Promise<void> {
-    await this.docxService.create(this.showId, {
-      chordMode: 'hide',
-      copyright: true,
-    });
+    if (this.showId != null)
+      await this.docxService.create(this.showId, {
+        chordMode: 'hide',
+        copyright: true,
+      });
   }
 }

src/app/modules/shows/show/song/song.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="iSong">
+<div *ngIf="iSong && showSong && show">
   <div *ngIf="show.published" class="title published">{{ iSong.title }}</div>
 
   <div *ngIf="!show.published" class="song">

src/app/modules/shows/show/song/song.component.ts

@@ -16,18 +16,18 @@ import {Show} from '../../services/show';
   styleUrls: ['./song.component.less'],
 })
 export class SongComponent implements OnInit {
-  @Input() public show: Show;
-  @Input() public showSong: ShowSong;
-  @Input() public showSongs: ShowSong[];
-  @Input() public showId: string;
-  @Input() public showText: boolean;
+  @Input() public show: Show | null = null;
+  @Input() public showSong: ShowSong | null = null;
+  @Input() public showSongs: ShowSong[] | null = null;
+  @Input() public showId: string | null = null;
+  @Input() public showText: boolean | null = null;
 
-  public keys: string[];
+  public keys: string[] = [];
   public faDelete = faTrash;
   public faUp = faCaretUp;
   public faDown = faCaretDown;
-  public keyFormControl: FormControl;
-  public iSong: Song;
+  public keyFormControl: FormControl = new FormControl();
+  public iSong: Song | null = null;
 
   public constructor(private showSongService: ShowSongService) {}
 
@@ -38,13 +38,16 @@ export class SongComponent implements OnInit {
   }
 
   public ngOnInit(): void {
+    if (!this.showSong) return;
     this.keyFormControl = new FormControl(this.showSong.key);
     this.keyFormControl.valueChanges.subscribe((value: string) => {
+      if (!this.showId || !this.showSong) return;
       void this.showSongService.update$(this.showId, this.showSong.id, {key: value});
     });
   }
 
   public async onDelete(): Promise<void> {
+    if (!this.showId || !this.showSong) return;
     await this.showSongService.delete$(this.showId, this.showSong.id);
   }
 
@@ -57,7 +60,8 @@ export class SongComponent implements OnInit {
   }
 
   public async reorderUp(): Promise<void> {
-    const index = this.showSongs.findIndex(_ => _.songId === this.iSong.id);
+    if (!this.showSongs || !this.showId) return;
+    const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
     if (index === 0) {
       return;
     }
@@ -74,7 +78,8 @@ export class SongComponent implements OnInit {
   }
 
   public async reorderDown(): Promise<void> {
-    const index = this.showSongs.findIndex(_ => _.songId === this.iSong.id);
+    if (!this.showSongs || !this.showId) return;
+    const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
     if (index === this.showSongs.length - 1) {
       return;
     }
@@ -91,6 +96,7 @@ export class SongComponent implements OnInit {
   }
 
   public async onChordModeChanged(value: ChordMode): Promise<void> {
+    if (!this.showId || !this.showSong) return;
     await this.showSongService.update$(this.showId, this.showSong.id, {
       chordMode: value,
     });