activated typescript strict mode

src/app/modules/songs/services/chord.ts

@@ -2,6 +2,6 @@ export interface Chord {
   chord: string;
   length: number;
   position: number;
-  slashChord?: string;
-  add?: string;
+  slashChord: string | null;
+  add: string | null;
 }

src/app/modules/songs/services/line.ts

@@ -4,5 +4,5 @@ import {Chord} from './chord';
 export interface Line {
   type: LineType;
   text: string;
-  chords?: Chord[];
+  chords: Chord[] | null;
 }

src/app/modules/songs/services/song-data.service.ts

@@ -12,8 +12,10 @@ export class SongDataService {
   public constructor(private dbService: DbService) {}
 
   public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
-  public read$ = (songId: string): Observable<Song | undefined> => this.dbService.doc$(this.collection + '/' + songId);
-  public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);
+  public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
+  public update$ = async (songId: string, data: Partial<Song>): Promise<void> =>
+    await this.dbService.doc(this.collection + '/' + songId).update(data);
   public add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
-  public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();
+  public delete = async (songId: string): Promise<void> =>
+    await this.dbService.doc(this.collection + '/' + songId).delete();
 }

src/app/modules/songs/services/song.service.ts

@@ -26,13 +26,15 @@ export class SongService {
   }
 
   public list$ = (): Observable<Song[]> => this.songDataService.list$(); //.pipe(tap(_ => (this.list = _)));
-  public read$ = (songId: string): Observable<Song | undefined> => this.songDataService.read$(songId);
-  public read = (songId: string): Promise<Song | undefined> => this.read$(songId).pipe(first()).toPromise();
+  public read$ = (songId: string): Observable<Song | null> => this.songDataService.read$(songId);
+  public read = (songId: string): Promise<Song | null> => this.read$(songId).pipe(first()).toPromise();
 
   public async update$(songId: string, data: Partial<Song>): Promise<void> {
     const song = await this.read(songId);
+    if (!song) return;
     const edits = song.edits ?? [];
     const user = await this.userService.currentUser();
+    if (!user) return;
     edits.push({username: user.name, timestamp: Timestamp.now()});
     await this.songDataService.update$(songId, {...data, edits});
   }

src/app/modules/songs/services/text-rendering.service.ts

@@ -15,7 +15,7 @@ export class TextRenderingService {
 
   public constructor(private transposeService: TransposeService) {}
 
-  public parse(text: string, transpose: TransposeMode): Section[] {
+  public parse(text: string, transpose: TransposeMode | null): Section[] {
     if (!text) {
       return [];
     }
@@ -27,22 +27,21 @@ export class TextRenderingService {
     };
     return arrayOfLines.reduce((array, line) => {
       const type = this.getSectionTypeOfLine(line);
-      if (this.regexSection.exec(line)) {
-        return [
-          ...array,
-          {
-            type,
-            number: indices[type]++,
-            lines: [],
-          },
-        ];
+      if (this.regexSection.exec(line) && type !== null) {
+        const section: Section = {
+          type,
+          number: indices[type]++,
+          lines: [],
+        };
+        return [...array, section];
       }
-      array[array.length - 1].lines.push(this.getLineOfLineText(line, transpose));
+      const lineOfLineText = this.getLineOfLineText(line, transpose);
+      if (lineOfLineText) array[array.length - 1].lines.push(lineOfLineText);
       return array;
     }, [] as Section[]);
   }
 
-  private getLineOfLineText(text: string, transpose: TransposeMode): Line {
+  private getLineOfLineText(text: string, transpose: TransposeMode | null): Line | null {
     if (!text) {
       return null;
     }
@@ -50,11 +49,13 @@ export class TextRenderingService {
     const hasMatches = cords.length > 0;
     const type = hasMatches ? LineType.chord : LineType.text;
 
-    const line = {type, text, chords: hasMatches ? cords : undefined};
-    return transpose ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey) : this.transposeService.renderChords(line);
+    const line: Line = {type, text, chords: hasMatches ? cords : null};
+    return transpose
+      ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey)
+      : this.transposeService.renderChords(line);
   }
 
-  private getSectionTypeOfLine(line: string): SectionType {
+  private getSectionTypeOfLine(line: string): SectionType | null {
     if (!line) {
       return null;
     }
@@ -71,10 +72,12 @@ export class TextRenderingService {
       case 'Bridge':
         return SectionType.Bridge;
     }
+
+    return null;
   }
 
   private readChords(chordLine: string): Chord[] {
-    let match: string[];
+    let match: string[] | null;
     const chords: Chord[] = [];
 
     // https://regex101.com/r/68jMB8/5
@@ -86,6 +89,8 @@ export class TextRenderingService {
         chord: match[1],
         length: match[0].length,
         position: regex.lastIndex - match[0].length,
+        slashChord: null,
+        add: null,
       };
       if (match[3]) {
         chord.slashChord = match[3];

src/app/modules/songs/services/transpose.service.ts

@@ -17,8 +17,9 @@ export class TransposeService {
     const difference = this.getDistance(baseKey, targetKey);
     const map = this.getMap(baseKey, difference);
 
-    const chords = difference > 0 ? line.chords.map(chord => this.transposeChord(chord, map)) : line.chords;
-    const renderedLine = this.renderLine(chords);
+    const chords =
+      difference > 0 && line.chords && map ? line.chords.map(chord => this.transposeChord(chord, map)) : line.chords;
+    const renderedLine = this.renderLine(chords ?? []);
 
     return {...line, text: renderedLine, chords};
   }
@@ -28,13 +29,16 @@ export class TransposeService {
       return line;
     }
 
-    const renderedLine = this.renderLine(line.chords);
+    const renderedLine = this.renderLine(line.chords ?? []);
     return {...line, text: renderedLine};
   }
 
   public getDistance(baseKey: string, targetKey: string): number {
     const scale = getScaleType(baseKey);
-    return scale ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ?? scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12 : 0;
+    return scale
+      ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ??
+          scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12
+      : 0;
   }
 
   public getMap(baseKey: string, difference: number): TransposeMap | null {
@@ -42,7 +46,7 @@ export class TransposeService {
     if (!scale) {
       return null;
     }
-    const map = {};
+    const map: {[key: string]: string} = {};
     for (let i = 0; i < 12; i++) {
       const source = scale[0][i];
       const mappedIndex = (i + difference) % 12;
@@ -68,7 +72,8 @@ export class TransposeService {
   }
 
   private renderLine(chords: Chord[]): string {
-    let template = '                                                                                                    ';
+    let template =
+      '                                                                                                    ';
 
     chords.forEach(chord => {
       const pos = chord.position;
@@ -85,6 +90,10 @@ export class TransposeService {
   }
 
   private renderChord(chord: Chord) {
-    return scaleMapping[chord.chord] + (chord.add ? chord.add : '') + (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '');
+    return (
+      scaleMapping[chord.chord] +
+      (chord.add ? chord.add : '') +
+      (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '')
+    );
   }
 }

src/app/modules/songs/services/upload.service.ts

@@ -22,7 +22,7 @@ export class UploadService extends FileBase {
     const ref = this.angularFireStorage.ref(filePath);
     const task = ref.put(upload.file);
 
-    task.percentageChanges().subscribe(percent => (upload.progress = percent));
+    task.percentageChanges().subscribe(percent => (upload.progress = percent ?? 0));
     task
       .snapshotChanges()
       .pipe(finalize(() => void this.saveFileData(songId, upload)))

src/app/modules/songs/services/upload.ts

@@ -1,9 +1,8 @@
 export class Upload {
-  public $key: string;
   public file: File;
-  public name: string;
-  public path: string;
-  public progress: number;
+  public name = '';
+  public path = '';
+  public progress = 0;
   public createdAt: Date = new Date();
 
   public constructor(file: File) {

src/app/modules/songs/song-list/filter/filter.component.ts

@@ -13,8 +13,8 @@ import {KEYS} from '../../services/key.helper';
 })
 export class FilterComponent {
   public filterFormGroup: FormGroup;
-  @Input() public route: string;
-  @Input() public songs: Song[];
+  @Input() public route = '/';
+  @Input() public songs: Song[] = [];
   public types = SongService.TYPES;
   public legalType = SongService.LEGAL_TYPE;
   public keys = KEYS;
@@ -28,7 +28,8 @@ export class FilterComponent {
       flag: '',
     });
 
-    activatedRoute.queryParams.subscribe((filterValues: FilterValues) => {
+    activatedRoute.queryParams.subscribe(params => {
+      const filterValues = params as FilterValues;
       if (filterValues.q) this.filterFormGroup.controls.q.setValue(filterValues.q);
       if (filterValues.type) this.filterFormGroup.controls.type.setValue(filterValues.type);
       if (filterValues.key) this.filterFormGroup.controls.key.setValue(filterValues.key);

src/app/modules/songs/song-list/list-item/list-item.component.html

@@ -1,4 +1,4 @@
-<div class="list-item">
+<div class="list-item" *ngIf="song">
   <div class="number">{{ song.number }}</div>
   <div>{{ song.title }}</div>
   <div>

src/app/modules/songs/song-list/list-item/list-item.component.ts

@@ -10,7 +10,7 @@ import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
   styleUrls: ['./list-item.component.less'],
 })
 export class ListItemComponent {
-  @Input() public song: Song;
+  @Input() public song: Song | null = null;
   public faLegal = faBalanceScaleRight;
   public faDraft = faPencilRuler;
   public faFinal = faCheck;

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

@@ -16,10 +16,14 @@ import {ScrollService} from '../../../services/scroll.service';
   animations: [fade],
 })
 export class SongListComponent implements OnInit, OnDestroy {
-  public songs$: Observable<Song[]>;
+  public songs$: Observable<Song[]> | null = null;
   public anyFilterActive = false;
 
-  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
+  public constructor(
+    private songService: SongService,
+    private activatedRoute: ActivatedRoute,
+    private scrollService: ScrollService
+  ) {}
 
   public ngOnInit(): void {
     const filter$ = this.activatedRoute.queryParams.pipe(

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))
     );
   }