activated typescript strict mode

src/app/modules/brand/new-user/new-user.component.ts

@@ -9,7 +9,7 @@ import {User} from '../../../services/user/user';
   styleUrls: ['./new-user.component.less'],
 })
 export class NewUserComponent {
-  public user$: Observable<User>;
+  public user$: Observable<User | null> | null = null;
 
   public constructor(private userService: UserService) {
     this.user$ = userService.user$;

src/app/modules/guest/guest.component.ts

@@ -2,8 +2,10 @@ import {Component, OnInit} from '@angular/core';
 import {SongService} from '../songs/services/song.service';
 import {GlobalSettingsService} from '../../services/global-settings.service';
 import {Observable} from 'rxjs';
-import {map, switchMap} from 'rxjs/operators';
+import {filter, map, switchMap} from 'rxjs/operators';
 import {ShowSongService} from '../shows/services/show-song.service';
+import {GlobalSettings} from '../../services/global-settings';
+import {Song} from '../songs/services/song';
 
 @Component({
   selector: 'app-guest',
@@ -11,15 +13,31 @@ import {ShowSongService} from '../shows/services/show-song.service';
   styleUrls: ['./guest.component.less'],
 })
 export class GuestComponent implements OnInit {
-  public songs$: Observable<Observable<string>[]>;
+  public songs$: Observable<Observable<string>[]> | null = null;
 
-  public constructor(private songService: SongService, private globalSettingsService: GlobalSettingsService, private showSongService: ShowSongService) {}
+  public constructor(
+    private songService: SongService,
+    private globalSettingsService: GlobalSettingsService,
+    private showSongService: ShowSongService
+  ) {}
 
   public ngOnInit(): void {
     this.songs$ = this.globalSettingsService.get$.pipe(
+      filter(_ => !!_),
+      map(_ => _ as GlobalSettings),
       map(_ => _.currentShow),
       switchMap(_ => this.showSongService.list$(_)),
-      map(_ => _.sort((x, y) => x.order - y.order).map(showSong => this.songService.read$(showSong.songId).pipe(map(song => song.text))))
+      filter(_ => !!_),
+      map(_ => _),
+      map(_ =>
+        _.sort((x, y) => x.order - y.order).map(showSong =>
+          this.songService.read$(showSong.songId).pipe(
+            filter(_ => !!_),
+            map(_ => _ as Song),
+            map(song => song.text)
+          )
+        )
+      )
     );
   }
 }

src/app/modules/presentation/monitor/legal/legal.component.html

@@ -1,12 +1,14 @@
-<p *ngIf="song.artist">{{ song.artist }}</p>
-<p *ngIf="song.label">{{ song.label }}</p>
-<p *ngIf="song.termsOfUse" class="terms-of-use">{{ song.termsOfUse }}</p>
-<p *ngIf="song.origin">{{ song.origin }}</p>
+<ng-container *ngIf="song">
+  <p *ngIf="song.artist">{{ song.artist }}</p>
+  <p *ngIf="song.label">{{ song.label }}</p>
+  <p *ngIf="song.termsOfUse" class="terms-of-use">{{ song.termsOfUse }}</p>
+  <p *ngIf="song.origin">{{ song.origin }}</p>
 
-<div *ngIf="song.legalOwnerId">
-  <p *ngIf="song.legalOwner === 'CCLI' && config">
-    CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
-    {{ config.ccliLicenseId }}
-  </p>
-  <p *ngIf="song.legalOwner !== 'CCLI'">Liednummer {{ song.legalOwnerId }}</p>
-</div>
+  <div *ngIf="song.legalOwnerId">
+    <p *ngIf="song.legalOwner === 'CCLI' && config">
+      CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
+      {{ config.ccliLicenseId }}
+    </p>
+    <p *ngIf="song.legalOwner !== 'CCLI'">Liednummer {{ song.legalOwnerId }}</p>
+  </div>
+</ng-container>

src/app/modules/presentation/monitor/legal/legal.component.ts

@@ -8,6 +8,6 @@ import {Config} from '../../../../services/config';
   styleUrls: ['./legal.component.less'],
 })
 export class LegalComponent {
-  @Input() public song: Song;
-  @Input() public config: Config;
+  @Input() public song: Song | null = null;
+  @Input() public config: Config | null = null;
 }

src/app/modules/presentation/monitor/monitor.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="song" [style.font-size.px]="zoom" class="fullscreen background">
+<div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
   <div
     @songSwitch
     [class.blur]="songId === 'title'"

src/app/modules/presentation/monitor/monitor.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators';
+import {distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -10,6 +10,7 @@ import {ConfigService} from '../../../services/config.service';
 import {songSwitch} from '../../../widget-modules/components/song-text/animation';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Show} from '../../shows/services/show';
+import {GlobalSettings} from '../../../services/global-settings';
 
 @Component({
   selector: 'app-monitor',
@@ -18,14 +19,14 @@ import {Show} from '../../shows/services/show';
   animations: [songSwitch],
 })
 export class MonitorComponent implements OnInit {
-  public song: Song;
-  public zoom: number;
-  public currentShowId: string;
-  public songId: string;
-  public index: number;
-  public showType: string;
-  public date: Date;
-  public config$: Observable<Config>;
+  public song: Song | null = null;
+  public zoom = 10;
+  public currentShowId: string | null = null;
+  public songId: string | null = null;
+  public index: number | null = null;
+  public showType: string | null = null;
+  public date: Date | null = null;
+  public config$: Observable<Config | null>;
 
   // private sections: Section[];
 
@@ -42,18 +43,28 @@ export class MonitorComponent implements OnInit {
   public ngOnInit(): void {
     this.globalSettingsService.get$
       .pipe(
+        filter(_ => !!_),
+        map(_ => _ as GlobalSettings),
         map(_ => _.currentShow),
         distinctUntilChanged(),
-        tap(_ => (this.currentShowId = _)),
-        switchMap(_ => this.showService.read$(_)),
-        tap(_ => (this.showType = _.showType)),
-        tap(_ => (this.date = _.date.toDate())),
-        tap(_ => (this.songId = _.presentationSongId)),
-        tap(_ => (this.index = _.presentationSection)),
-        tap(_ => (this.zoom = _.presentationZoom ?? 30)),
-        switchMap((_: Show) => this.songService.read$(_.presentationSongId))
+        tap(_ => (this.currentShowId = _))
       )
-      .subscribe((_: Song) => {
+      .pipe(
+        switchMap(_ => this.showService.read$(_)),
+        filter(_ => !!_),
+        map(_ => _ as Show),
+        tap<Show>(_ => (this.showType = _.showType)),
+        tap<Show>(_ => (this.date = _.date.toDate())),
+        tap<Show>(_ => (this.songId = _.presentationSongId)),
+        tap<Show>(_ => (this.index = _.presentationSection)),
+        tap<Show>(_ => (this.zoom = _.presentationZoom ?? 30))
+      )
+      .pipe(
+        switchMap((_: Show) => this.songService.read$(_.presentationSongId)),
+        filter(_ => !!_),
+        map(_ => _ as Song)
+      )
+      .subscribe(_ => {
         this.song = _;
         // this.sections = this.textRenderingService.parse(_.text, null);
       });

src/app/modules/presentation/remote/remote.component.html

@@ -33,7 +33,7 @@
       </div>
 
       <div *ngFor="let song of presentationSongs" @fade class="song">
-        <div
+        <div *ngIf="show"
           [class.active]="show.presentationSongId === song.id"
           class="title song-part"
         >

src/app/modules/presentation/remote/remote.component.ts

@@ -9,11 +9,12 @@ import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {FormControl} from '@angular/forms';
-import {distinctUntilChanged, map} from 'rxjs/operators';
+import {distinctUntilChanged, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {delay} from '../../../services/delay';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
+import {GlobalSettings} from '../../../services/global-settings';
 
 export interface PresentationSong {
   id: string;
@@ -29,11 +30,11 @@ export interface PresentationSong {
 })
 export class RemoteComponent {
   public shows$: Observable<Show[]>;
-  public show: Show;
-  public showSongs: ShowSong[];
-  public songs: Song[];
-  public presentationSongs: PresentationSong[];
-  public currentShowId: string;
+  public show: Show | null = null;
+  public showSongs: ShowSong[] = [];
+  public songs: Song[] = [];
+  public presentationSongs: PresentationSong[] = [];
+  public currentShowId: string | null = null;
   public progress = false;
 
   public faDesktop = faDesktop;
@@ -51,6 +52,8 @@ export class RemoteComponent {
 
     globalSettingsService.get$
       .pipe(
+        filter(_ => !!_),
+        map(_ => _ as GlobalSettings),
         map(_ => _.currentShow),
         distinctUntilChanged()
       )
@@ -88,13 +91,14 @@ export class RemoteComponent {
   }
 
   public async onSectionClick(id: string, index: number): Promise<void> {
-    await this.showService.update$(this.currentShowId, {
-      presentationSongId: id,
-      presentationSection: index,
-    });
+    if (this.currentShowId != null)
+      await this.showService.update$(this.currentShowId, {
+        presentationSongId: id,
+        presentationSection: index,
+      });
   }
 
   public async onZoom(zoom: number): Promise<void> {
-    await this.showService.update$(this.currentShowId, {presentationZoom: zoom});
+    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationZoom: zoom});
   }
 }

src/app/modules/shows/list/list-item/list-item.component.html

@@ -1,4 +1,4 @@
-<div class="list-item">
+<div class="list-item" *ngIf="show">
   <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
   <div>{{ show.showType | showType }}</div>
 </div>

src/app/modules/shows/list/list-item/list-item.component.ts

@@ -7,5 +7,5 @@ import {Show} from '../../services/show';
   styleUrls: ['./list-item.component.less'],
 })
 export class ListItemComponent {
-  @Input() public show: Show;
+  @Input() public show: Show | null = null;
 }

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

@@ -16,7 +16,10 @@ export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
-  public form: FormGroup;
+  public form: FormGroup = new FormGroup({
+    date: new FormControl(null, Validators.required),
+    showType: new FormControl(null, Validators.required),
+  });
   public faSave = faSave;
 
   public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
@@ -24,10 +27,7 @@ export class NewComponent implements OnInit {
   }
 
   public ngOnInit(): void {
-    this.form = new FormGroup({
-      date: new FormControl(null, Validators.required),
-      showType: new FormControl(null, Validators.required),
-    });
+    this.form.reset();
   }
 
   public async onSave(): Promise<void> {
@@ -37,6 +37,6 @@ export class NewComponent implements OnInit {
     }
 
     const id = await this.showService.new$(this.form.value);
-    await this.router.navigateByUrl('/shows/' + id);
+    await this.router.navigateByUrl(`/shows/${id ?? ''}`);
   }
 }

src/app/modules/shows/services/docx.service.ts

@@ -37,7 +37,9 @@ export class DocxService {
   ) {}
 
   public async create(showId: string, options: DownloadOptions = {}): Promise<void> {
-    const {show, songs, user, config} = await this.prepareData(showId);
+    const data = await this.prepareData(showId);
+    if (!data) return;
+    const {show, songs, user, config} = data;
     const type = new ShowTypePipe().transform(show.showType);
     const title = `${type} ${show.date.toDate().toLocaleDateString()}`;
 
@@ -61,7 +63,12 @@ export class DocxService {
     this.saveAs(blob, `${title}.docx`);
   }
 
-  private prepareNewDocument(type: string, name: string, options: DownloadOptions, sections: ISectionOptions[]): Document {
+  private prepareNewDocument(
+    type: string,
+    name: string,
+    options: DownloadOptions,
+    sections: ISectionOptions[]
+  ): Document {
     return new Document({
       creator: name,
       title: type,
@@ -92,16 +99,29 @@ export class DocxService {
     });
   }
 
-  private renderSongs(songs: {showSong: ShowSong; song: Song; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
-    return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.song, song.sections, options, config)], []);
+  private renderSongs(
+    songs: {showSong: ShowSong; song: Song; sections: Section[]}[],
+    options: DownloadOptions,
+    config: Config
+  ): Paragraph[] {
+    return songs.reduce(
+      (p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.song, song.sections, options, config)],
+      []
+    );
   }
 
-  private renderSong(showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): Paragraph[] {
+  private renderSong(
+    showSong: ShowSong,
+    song: Song,
+    sections: Section[],
+    options: DownloadOptions,
+    config: Config
+  ): Paragraph[] {
     const songTitle = this.renderSongTitle(song);
     const copyright = this.renderCopyright(song, options, config);
     const songText = this.renderSongText(sections, options?.chordMode ?? showSong.chordMode);
 
-    return [songTitle, copyright, ...songText].filter(_ => _);
+    return copyright ? [songTitle, copyright, ...songText] : [songTitle, ...songText];
   }
 
   private renderSongText(sections: Section[], chordMode: ChordMode): Paragraph[] {
@@ -119,7 +139,7 @@ export class DocxService {
     });
   }
 
-  private renderCopyright(song: Song, options: DownloadOptions, config: Config): Paragraph {
+  private renderCopyright(song: Song, options: DownloadOptions, config: Config): Paragraph | null {
     if (!options?.copyright) {
       return null;
     }
@@ -128,7 +148,10 @@ export class DocxService {
     const artist = song.artist ? song.artist + ', ' : '';
     const termsOfUse = song.termsOfUse ? song.termsOfUse + ', ' : '';
     const origin = song.origin ? song.origin + ', ' : '';
-    const licence = song.legalOwner === 'CCLI' ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId : 'CCLI-Liednummer: ' + song.legalOwnerId;
+    const licence =
+      song.legalOwner === 'CCLI'
+        ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId
+        : 'CCLI-Liednummer: ' + song.legalOwnerId;
 
     return new Paragraph({
       text: artist + label + termsOfUse + origin + licence,
@@ -178,14 +201,18 @@ export class DocxService {
     show: Show;
     user: User;
     config: Config;
-  }> {
+  } | null> {
     const show = await this.showService.read$(showId).pipe(first()).toPromise();
+    if (!show) return null;
     const user = await this.userService.getUserbyId(show.owner);
+    if (!user) return null;
     const config = await this.configService.get();
+    if (!config) return null;
 
     const showSongs = await this.showSongService.list(showId);
     const songsAsync = showSongs.map(async showSong => {
       const song = await this.songService.read(showSong.songId);
+      if (!song) return null;
       const sections = this.textRenderingService.parse(song.text, {
         baseKey: showSong.keyOriginal,
         targetKey: showSong.key,
@@ -196,7 +223,9 @@ export class DocxService {
         sections,
       };
     });
-    const songs = await Promise.all(songsAsync);
+    const songs = (await Promise.all(songsAsync))
+      .filter(_ => !!_)
+      .map(_ => _ as {showSong: ShowSong; song: Song; sections: Section[]});
     return {songs, show, user, config};
   }
 

src/app/modules/shows/services/show-data.service.ts

@@ -13,7 +13,8 @@ export class ShowDataService {
   public constructor(private dbService: DbService) {}
 
   public list$ = (queryFn?: QueryFn): Observable<Show[]> => this.dbService.col$(this.collection, queryFn);
-  public read$ = (showId: string): Observable<Show | undefined> => this.dbService.doc$(`${this.collection}/${showId}`);
-  public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
+  public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
+  public update = async (showId: string, data: Partial<Show>): Promise<void> =>
+    await this.dbService.doc(`${this.collection}/${showId}`).update(data);
   public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
 }

src/app/modules/shows/services/show-song-data.service.ts

@@ -13,10 +13,14 @@ export class ShowSongDataService {
 
   public constructor(private dbService: DbService) {}
 
-  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
-  public read$ = (showId: string, songId: string): Observable<ShowSong | undefined> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
+  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> =>
+    this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+  public read$ = (showId: string, songId: string): Observable<ShowSong | null> =>
+    this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
     await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);
-  public delete = async (showId: string, songId: string): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).delete();
-  public add = async (showId: string, data: Partial<ShowSong>): Promise<string> => (await this.dbService.col(`${this.collection}/${showId}/${this.subCollection}`).add(data)).id;
+  public delete = async (showId: string, songId: string): Promise<void> =>
+    await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).delete();
+  public add = async (showId: string, data: Partial<ShowSong>): Promise<string> =>
+    (await this.dbService.col(`${this.collection}/${showId}/${this.subCollection}`).add(data)).id;
 }

src/app/modules/shows/services/show-song.service.ts

@@ -10,11 +10,16 @@ import {UserService} from '../../../services/user/user.service';
   providedIn: 'root',
 })
 export class ShowSongService {
-  public constructor(private showSongDataService: ShowSongDataService, private songDataService: SongDataService, private userService: UserService) {}
+  public constructor(
+    private showSongDataService: ShowSongDataService,
+    private songDataService: SongDataService,
+    private userService: UserService
+  ) {}
 
-  public async new$(showId: string, songId: string, order: number, addedLive = false): Promise<string> {
+  public async new$(showId: string, songId: string, order: number, addedLive = false): Promise<string | null> {
     const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
     const user = await this.userService.user$.pipe(take(1)).toPromise();
+    if (!song || !user) return null;
     const data: Partial<ShowSong> = {
       songId,
       order,
@@ -26,8 +31,10 @@ export class ShowSongService {
     return await this.showSongDataService.add(showId, data);
   }
 
-  public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId, _ => _.orderBy('order'));
+  public list$ = (showId: string): Observable<ShowSong[]> =>
+    this.showSongDataService.list$(showId, _ => _.orderBy('order'));
   public list = (showId: string): Promise<ShowSong[]> => this.list$(showId).pipe(first()).toPromise();
   public delete$ = (showId: string, songId: string): Promise<void> => this.showSongDataService.delete(showId, songId);
-  public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);
+  public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
+    await this.showSongDataService.update$(showId, songId, data);
 }

src/app/modules/shows/services/show.service.ts

@@ -10,30 +10,51 @@ import {User} from '../../../services/user/user';
   providedIn: 'root',
 })
 export class ShowService {
-  public static SHOW_TYPE = ['service-worship', 'service-praise', 'home-group-big', 'home-group', 'prayer-group', 'teens-group', 'kids-group', 'misc-public', 'misc-private'];
-  public static SHOW_TYPE_PUBLIC = ['service-worship', 'service-praise', 'home-group-big', 'teens-group', 'kids-group', 'misc-public'];
+  public static SHOW_TYPE = [
+    'service-worship',
+    'service-praise',
+    'home-group-big',
+    'home-group',
+    'prayer-group',
+    'teens-group',
+    'kids-group',
+    'misc-public',
+    'misc-private',
+  ];
+  public static SHOW_TYPE_PUBLIC = [
+    'service-worship',
+    'service-praise',
+    'home-group-big',
+    'teens-group',
+    'kids-group',
+    'misc-public',
+  ];
   public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private'];
-  private user: User;
+  private user: User | null = null;
 
   public constructor(private showDataService: ShowDataService, private userService: UserService) {
     userService.user$.subscribe(_ => (this.user = _));
   }
 
-  public read$ = (showId: string): Observable<Show> => this.showDataService.read$(showId);
+  public read$ = (showId: string): Observable<Show | null> => this.showDataService.read$(showId);
 
   public list$(publishedOnly = false): Observable<Show[]> {
     return this.userService.user$.pipe(
       switchMap(
         () => this.showDataService.list$(),
-        (user: User, shows: Show[]) => ({user, shows})
+        (user: User | null, shows: Show[]) => ({user, shows})
       ),
-      map(s => s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user.id && !publishedOnly)))
+      map(s =>
+        s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
+      )
     );
   }
 
-  public update$ = async (showId: string, data: Partial<Show>): Promise<void> => this.showDataService.update(showId, data);
+  public update$ = async (showId: string, data: Partial<Show>): Promise<void> =>
+    this.showDataService.update(showId, data);
 
-  public async new$(data: Partial<Show>): Promise<string> {
+  public async new$(data: Partial<Show>): Promise<string | null> {
+    if (!data.showType || !this.user) return null;
     const calculatedData: Partial<Show> = {
       ...data,
       owner: this.user.id,

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

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

src/app/modules/user/info/info.component.ts

@@ -11,7 +11,7 @@ import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
   styleUrls: ['./info.component.less'],
 })
 export class InfoComponent implements OnInit {
-  public user$: Observable<User>;
+  public user$: Observable<User | null> | null = null;
   public faSignOut = faSignOutAlt;
 
   public constructor(private userService: UserService) {}

src/app/modules/user/info/role.pipe.ts

@@ -19,5 +19,7 @@ export class RolePipe implements PipeTransform {
       case 'presenter':
         return 'Präsentator';
     }
+
+    return 'keine Rolle';
   }
 }

src/app/modules/user/info/users/user/user.component.ts

@@ -10,9 +10,9 @@ import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
   styleUrls: ['./user.component.less'],
 })
 export class UserComponent {
-  public id: string;
-  public name: string;
-  public roles: string[];
+  public id = '';
+  public name = '';
+  public roles: string[] = [];
   public ROLE_TYPES = ROLE_TYPES;
   public edit = false;
   public faClose = faTimes;

src/app/modules/user/login/login.component.ts

@@ -11,18 +11,18 @@ import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
   styleUrls: ['./login.component.less'],
 })
 export class LoginComponent implements OnInit {
-  public form: FormGroup;
-  public errorMessage: string;
+  public form: FormGroup = new FormGroup({
+    user: new FormControl(null, [Validators.required, Validators.email]),
+    pass: new FormControl(null, [Validators.required]),
+  });
+  public errorMessage = '';
   public faSignIn = faSignInAlt;
   public faNewUser = faUserPlus;
 
   public constructor(private userService: UserService, private router: Router) {}
 
   public ngOnInit(): void {
-    this.form = new FormGroup({
-      user: new FormControl(null, [Validators.required, Validators.email]),
-      pass: new FormControl(null, [Validators.required]),
-    });
+    this.form.reset;
   }
 
   public async onLogin(): Promise<void> {

src/app/modules/user/new/new.component.ts

@@ -9,17 +9,17 @@ import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
   styleUrls: ['./new.component.less'],
 })
 export class NewComponent implements OnInit {
-  public form: FormGroup;
+  public form: FormGroup = this.fb.group({
+    email: new FormControl(null, [Validators.required, Validators.email]),
+    name: new FormControl(null, [Validators.required]),
+    password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+  });
   public faNewUser = faUserPlus;
 
   public constructor(private fb: FormBuilder, private userService: UserService) {}
 
   public ngOnInit(): void {
-    this.form = this.fb.group({
-      email: new FormControl(null, [Validators.required, Validators.email]),
-      name: new FormControl(null, [Validators.required]),
-      password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
-    });
+    this.form.reset();
   }
 
   public async onCreate(): Promise<void> {

src/app/modules/user/password/password.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
@@ -10,18 +10,17 @@ import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore
   styleUrls: ['./password.component.less'],
 })
 export class PasswordComponent implements OnInit {
-  public form: FormGroup;
-  public errorMessage: string;
+  public form: FormGroup = new FormGroup({
+    user: new FormControl(null, [Validators.required, Validators.email]),
+  });
+
+  public errorMessage = '';
   public faNewPassword = faWindowRestore;
 
   public constructor(public userService: UserService, private router: Router) {}
 
   public ngOnInit(): void {
-    const required = (c: AbstractControl) => Validators.required(c);
-    const email = Validators.email;
-    this.form = new FormGroup({
-      user: new FormControl(null, [required, email]),
-    });
+    this.form.reset();
   }
 
   public async onResetPassword(): Promise<void> {

src/app/modules/user/user.module.ts

@@ -24,7 +24,18 @@ import {LogoModule} from '../../widget-modules/components/logo/logo.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 @NgModule({
-  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent],
+  declarations: [
+    LoginComponent,
+    AuthMessagePipe,
+    InfoComponent,
+    LogoutComponent,
+    RolePipe,
+    PasswordComponent,
+    PasswordSendComponent,
+    UsersComponent,
+    UserComponent,
+    NewComponent,
+  ],
   imports: [
     CommonModule,
     UserRoutingModule,