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()
       )

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

@@ -9,8 +9,8 @@ import {Observable} from 'rxjs';
   styleUrls: ['./file.component.less'],
 })
 export class FileComponent {
-  public url$: Observable<string>;
-  public name: string;
+  public url$: Observable<string> | null = null;
+  public name = '';
 
   public constructor(private storage: AngularFireStorage) {}
 

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

@@ -1,36 +1,39 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {autoComplete, Unsubscriber} from 'ngx-hocs-unsubscriber';
 import {SongService} from '../../services/song.service';
 import {Song} from '../../services/song';
 import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';
 
-@Unsubscriber()
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
 })
-export class NewComponent implements OnInit {
+export class NewComponent implements OnInit, OnDestroy {
   public faSave = faSave;
-  public form: FormGroup;
+  public form: FormGroup = new FormGroup({
+    number: new FormControl(null, Validators.required),
+    title: new FormControl(null, Validators.required),
+  });
 
   public constructor(private songService: SongService, private router: Router) {}
 
   public ngOnInit(): void {
-    this.form = new FormGroup({
-      number: new FormControl(null, Validators.required),
-      title: new FormControl(null, Validators.required),
-    });
+    this.form.reset();
 
-    this.songService
-      .list$()
-      .pipe(autoComplete(this))
-      .subscribe(songs => {
+    this.subs.push(
+      this.songService.list$().subscribe(songs => {
         const freeSongnumber = this.getFreeSongNumber(songs);
         this.form.controls.number.setValue(freeSongnumber);
-      });
+      })
+    );
+  }
+
+  private subs: Subscription[] = [];
+  public ngOnDestroy(): void {
+    this.subs.forEach(_ => _.unsubscribe());
   }
 
   public async onSave(): Promise<void> {
@@ -48,5 +51,6 @@ export class NewComponent implements OnInit {
         return i;
       }
     }
+    return Number.MAX_SAFE_INTEGER;
   }
 }

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

@@ -11,6 +11,15 @@ import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/a
 
 @NgModule({
   declarations: [NewComponent],
-  imports: [CommonModule, CardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, ButtonRowModule, ButtonModule, AutofocusModule],
+  imports: [
+    CommonModule,
+    CardModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ButtonRowModule,
+    ButtonModule,
+    AutofocusModule,
+  ],
 })
 export class NewModule {}

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

@@ -17,24 +17,32 @@ import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
   styleUrls: ['./song.component.less'],
 })
 export class SongComponent implements OnInit {
-  public song$: Observable<Song>;
-  public files$: Observable<File[]>;
-  public user$: Observable<User>;
+  public song$: Observable<Song | null> | null = null;
+  public files$: Observable<File[] | null> | null = null;
+  public user$: Observable<User | null> | null = null;
   public faEdit = faEdit;
   public faDelete = faTrash;
 
-  public constructor(private activatedRoute: ActivatedRoute, private songService: SongService, private fileService: FileDataService, private userService: UserService, private router: Router) {
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private songService: SongService,
+    private fileService: FileDataService,
+    private userService: UserService,
+    private router: Router
+  ) {
     this.user$ = userService.user$;
   }
 
   public ngOnInit(): void {
     this.song$ = 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))
     );
 
     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))
     );
   }