activated typescript strict mode

src/app/modules/songs/song/edit/edit-file/edit-file.component.ts

@@ -13,18 +13,28 @@ import {File} from '../../../services/file';
   styleUrls: ['./edit-file.component.less'],
 })
 export class EditFileComponent {
-  public selectedFiles: FileList;
-  public currentUpload: Upload;
-  public songId: string;
+  public selectedFiles: FileList | null = null;
+  public currentUpload: Upload | null = null;
+  public songId: string | null = null;
   public files$: Observable<File[]>;
 
-  public constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService, private fileService: FileDataService) {
-    this.activatedRoute.params.pipe(map((param: {songId: string}) => param.songId)).subscribe(songId => {
-      this.songId = songId;
-    });
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private uploadService: UploadService,
+    private fileService: FileDataService
+  ) {
+    this.activatedRoute.params
+      .pipe(
+        map(param => param as {songId: string}),
+        map(param => param.songId)
+      )
+      .subscribe(songId => {
+        this.songId = songId;
+      });
 
     this.files$ = this.activatedRoute.params.pipe(
-      map((param: {songId: string}) => param.songId),
+      map(param => param as {songId: string}),
+      map(param => param.songId),
       switchMap(songId => this.fileService.read$(songId))
     );
   }
@@ -35,7 +45,9 @@ export class EditFileComponent {
   }
 
   public uploadSingle(): void {
+    if (!this.selectedFiles || !this.songId) return;
     const file = this.selectedFiles.item(0);
+    if (!file) return;
     this.currentUpload = new Upload(file);
     this.uploadService.pushUpload(this.songId, this.currentUpload);
   }

src/app/modules/songs/song/edit/edit-file/file/file.component.ts

@@ -10,12 +10,12 @@ import {FileService} from '../../../../services/file.service';
   styleUrls: ['./file.component.less'],
 })
 export class FileComponent {
-  public url$: Observable<string>;
-  public name: string;
+  public url$: Observable<string> | null = null;
+  public name = '';
   public faTrash = faTrashAlt;
-  @Input() public songId: string;
-  private fileId: string;
-  private path: string;
+  @Input() public songId: string | null = null;
+  private fileId: string | null = null;
+  private path: string | null = null;
 
   public constructor(private fileService: FileService) {}
 
@@ -28,6 +28,6 @@ export class FileComponent {
   }
 
   public async onDelete(): Promise<void> {
-    await this.fileService.delete(this.path, this.songId, this.fileId);
+    if (this.path && this.songId && this.fileId) await this.fileService.delete(this.path, this.songId, this.fileId);
   }
 }

src/app/modules/songs/song/edit/edit-song.guard.ts

@@ -6,13 +6,13 @@ import {EditComponent} from './edit.component';
 @Injectable({
   providedIn: 'root',
 })
-export class EditSongGuard implements CanDeactivate<unknown> {
+export class EditSongGuard implements CanDeactivate<EditComponent> {
   public canDeactivate(
     component: EditComponent,
     currentRoute: ActivatedRouteSnapshot,
     currentState: RouterStateSnapshot,
-    nextState?: RouterStateSnapshot
+    nextState: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    return component.editSongComponent.askForSave(nextState);
+    return component.editSongComponent ? component.editSongComponent.askForSave(nextState) : true;
   }
 }

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -20,8 +20,8 @@ import {SaveDialogComponent} from './save-dialog/save-dialog.component';
   styleUrls: ['./edit-song.component.less'],
 })
 export class EditSongComponent implements OnInit {
-  public song: Song;
-  public form: FormGroup;
+  public song: Song | null = null;
+  public form: FormGroup = new FormGroup({});
   public keys = KEYS;
   public types = SongService.TYPES;
   public status = SongService.STATUS;
@@ -34,17 +34,25 @@ export class EditSongComponent implements OnInit {
   public faLink = faExternalLinkAlt;
   public songtextFocus = false;
 
-  public constructor(private activatedRoute: ActivatedRoute, private songService: SongService, private editService: EditService, private router: Router, public dialog: MatDialog) {}
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private songService: SongService,
+    private editService: EditService,
+    private router: Router,
+    public dialog: MatDialog
+  ) {}
 
   public ngOnInit(): void {
     this.activatedRoute.params
       .pipe(
-        map((param: {songId: string}) => param.songId),
+        map(param => param as {songId: string}),
+        map(param => param.songId),
         switchMap(songId => this.songService.read$(songId)),
         first()
       )
       .subscribe(song => {
         this.song = song;
+        if (!song) return;
         this.form = this.editService.createSongForm(song);
         this.form.controls.flags.valueChanges.subscribe(_ => this.onFlagsChanged(_));
         this.onFlagsChanged(this.form.controls.flags.value);
@@ -52,6 +60,7 @@ export class EditSongComponent implements OnInit {
   }
 
   public async onSave(): Promise<void> {
+    if (!this.song) return;
     const data = this.form.value as Partial<Song>;
     await this.songService.update$(this.song.id, data);
     this.form.markAsPristine();
@@ -78,7 +87,7 @@ export class EditSongComponent implements OnInit {
     }
   }
 
-  public askForSave(nextState?: RouterStateSnapshot): boolean {
+  public askForSave(nextState: RouterStateSnapshot): boolean {
     if (!this.form.dirty) {
       return true;
     }
@@ -104,7 +113,7 @@ export class EditSongComponent implements OnInit {
   }
 
   private async onSaveDialogAfterClosed(save: boolean, url: string) {
-    if (save) {
+    if (save && this.song) {
       const data = this.form.value as Partial<Song>;
       await this.songService.update$(this.song.id, data);
     }

src/app/modules/songs/song/edit/edit.component.ts

@@ -7,5 +7,5 @@ import {EditSongComponent} from './edit-song/edit-song.component';
   styleUrls: ['./edit.component.less'],
 })
 export class EditComponent {
-  @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent;
+  @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent | null = null;
 }

src/app/modules/songs/song/edit/edit.module.ts

@@ -28,7 +28,14 @@ import {HistoryComponent} from './history/history.component';
 import {SongTextModule} from '../../../../widget-modules/components/song-text/song-text.module';
 
 @NgModule({
-  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent, HistoryComponent],
+  declarations: [
+    EditComponent,
+    EditSongComponent,
+    EditFileComponent,
+    FileComponent,
+    SaveDialogComponent,
+    HistoryComponent,
+  ],
   exports: [EditComponent],
   bootstrap: [SaveDialogComponent],
   imports: [

src/app/modules/songs/song/edit/history/history.component.ts

@@ -10,14 +10,15 @@ import {Song} from '../../../services/song';
   styleUrls: ['./history.component.less'],
 })
 export class HistoryComponent implements OnInit {
-  public song: Song;
+  public song: Song | null = null;
 
   public constructor(private activatedRoute: ActivatedRoute, private songService: SongService) {}
 
   public ngOnInit(): void {
     this.activatedRoute.params
       .pipe(
-        map((param: {songId: string}) => param.songId),
+        map(param => param as {songId: string}),
+        map(param => param.songId),
         switchMap(songId => this.songService.read$(songId)),
         first()
       )