update angular version

.gitignore

@@ -302,6 +302,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -312,6 +313,5 @@ testem.log
 /typings
 
 # System Files
-.DS_Store
 Thumbs.db
 firebase.ts

package.json

@@ -2,7 +2,7 @@
   "name": "wgenerator",
   "version": "0.0.0",
   "scripts": {
-    "start": "ng serve --aot",
+    "start": "ng serve",
     "build": "ng build",
     "deploy": "npm i && ng build --prod && firebase deploy",
     "test": "ng test",
@@ -11,58 +11,59 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.0.1",
-    "@angular/cdk": "^12.0.1",
-    "@angular/common": "~12.0.1",
-    "@angular/compiler": "~12.0.1",
-    "@angular/core": "~12.0.1",
-    "@angular/fire": "^6.1.5",
-    "@angular/forms": "~12.0.1",
-    "@angular/material": "^12.0.1",
-    "@angular/platform-browser": "~12.0.1",
-    "@angular/platform-browser-dynamic": "~12.0.1",
-    "@angular/router": "~12.0.1",
-    "@angular/service-worker": "~12.0.1",
+    "@angular/animations": "^13.0.0",
+    "@angular/cdk": "^13.2.2",
+    "@angular/common": "^13.0.0",
+    "@angular/compiler": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@angular/fire": "^7.2.1",
+    "@angular/forms": "^13.0.0",
+    "@angular/material": "^13.2.2",
+    "@angular/platform-browser": "^13.0.0",
+    "@angular/platform-browser-dynamic": "^13.0.0",
+    "@angular/router": "^13.0.0",
+    "@angular/service-worker": "^13.0.0",
     "@fortawesome/angular-fontawesome": "^0.6.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "docx": "^6.0.3",
-    "firebase": "^8.7.0",
+    "firebase": "^9.4.0",
     "lodash": "^4.17.21",
     "ngx-mat-select-search": "^3.3.0",
     "ngx-perfect-scrollbar": "^10.1.1",
     "ngx-swiper-wrapper": "^10.0.0",
-    "rxjs": "~6.5.5",
+    "rxjs": "~7.5.4",
     "tslib": "^2.0.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.4",
+    "rxfire": "^6.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1200.1",
-    "@angular-devkit/build-angular": "~12.0.1",
+    "@angular-devkit/architect": "0.1302.3",
+    "@angular-devkit/build-angular": "~13.2.3",
     "@angular-eslint/builder": "12.0.0",
     "@angular-eslint/eslint-plugin": "12.0.0",
     "@angular-eslint/eslint-plugin-template": "12.0.0",
     "@angular-eslint/schematics": "12.0.0",
     "@angular-eslint/template-parser": "12.0.0",
-    "@angular/cli": "~12.0.1",
-    "@angular/compiler-cli": "~12.0.1",
-    "@angular/language-service": "~12.0.1",
+    "@angular/cli": "~13.2.3",
+    "@angular/compiler-cli": "^13.0.0",
+    "@angular/language-service": "^13.0.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/lodash": "^4.14.171",
     "@types/node": "^12.12.36",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
     "eslint": "^7.26.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "firebase-tools": "^7.12.0",
+    "firebase-tools": "^9.23.3",
     "fuzzy": "^0.1.3",
     "inquirer": "^6.2.2",
     "inquirer-autocomplete-prompt": "^1.0.1",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.3.16",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
@@ -71,6 +72,6 @@
     "protractor": "~7.0.0",
     "swiper": "^6.6.2",
     "ts-node": "~7.0.0",
-    "typescript": "~4.2.4"
+    "typescript": "~4.5.5"
   }
 }

src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
-import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
+import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/compat/auth-guard';
 import {RoleGuard} from './widget-modules/guards/role.guard';
 
 const routes: Routes = [

src/app/app.module.ts

@@ -7,12 +7,12 @@ import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ApplicationFrameModule} from './widget-modules/components/application-frame/application-frame.module';
-import {AngularFireModule} from '@angular/fire';
-import {AngularFirestoreModule} from '@angular/fire/firestore';
-import {AngularFireStorageModule} from '@angular/fire/storage';
-import {AngularFireDatabaseModule} from '@angular/fire/database';
-import {AngularFireAuthModule} from '@angular/fire/auth';
-import {AngularFireAuthGuardModule} from '@angular/fire/auth-guard';
+import {AngularFireModule} from '@angular/fire/compat';
+import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
+import {AngularFireStorageModule} from '@angular/fire/compat/storage';
+import {AngularFireDatabaseModule} from '@angular/fire/compat/database';
+import {AngularFireAuthModule} from '@angular/fire/compat/auth';
+import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
 import {MAT_DATE_LOCALE} from '@angular/material/core';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';

src/app/modules/brand/brand.component.html

@@ -1,4 +1,4 @@
 <div class="brand">
   <app-logo></app-logo>
-  <div class="copyright">© 2020 - Benjamin Ifland</div>
+  <div class="copyright">© 2022 - Benjamin Ifland</div>
 </div>

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

@@ -37,7 +37,7 @@ export class MonitorComponent implements OnInit {
     private globalSettingsService: GlobalSettingsService,
     private configService: ConfigService
   ) {
-    this.config$ = configService.get$;
+    this.config$ = configService.get$();
   }
 
   public ngOnInit(): void {

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

@@ -2,7 +2,6 @@ import {Injectable} from '@angular/core';
 import {Document, HeadingLevel, ISectionOptions, Packer, Paragraph} from 'docx';
 import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
-import {first} from 'rxjs/operators';
 import {ShowSongService} from './show-song.service';
 import {Song} from '../../songs/services/song';
 import {SongService} from '../../songs/services/song.service';
@@ -17,6 +16,7 @@ import {TextRenderingService} from '../../songs/services/text-rendering.service'
 import {Section} from '../../songs/services/section';
 import {LineType} from '../../songs/services/line-type';
 import {Line} from '../../songs/services/line';
+import {firstValueFrom} from 'rxjs';
 
 export interface DownloadOptions {
   copyright?: boolean;
@@ -181,7 +181,7 @@ export class DocxService {
     user: User;
     config: Config;
   } | null> {
-    const show = await this.showService.read$(showId).pipe(first()).toPromise();
+    const show = await firstValueFrom(this.showService.read$(showId));
     if (!show) return null;
     const user = await this.userService.getUserbyId(show.owner);
     if (!user) return null;

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

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
-import {QueryFn} from '@angular/fire/firestore/interfaces';
+import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 
 @Injectable({
   providedIn: 'root',

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

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {DbService} from '../../../services/db.service';
 import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
-import {QueryFn} from '@angular/fire/firestore/interfaces';
+import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 
 @Injectable({
   providedIn: 'root',

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

@@ -1,9 +1,8 @@
 import {Injectable} from '@angular/core';
 import {ShowSongDataService} from './show-song-data.service';
-import {Observable} from 'rxjs';
+import {firstValueFrom, Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
-import {first, take} from 'rxjs/operators';
 import {UserService} from '../../../services/user/user.service';
 import {ShowService} from './show.service';
 
@@ -19,8 +18,8 @@ export class ShowSongService {
   ) {}
 
   public async new$(showId: string, songId: string, 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();
+    const song = await firstValueFrom(this.songDataService.read$(songId));
+    const user = await firstValueFrom(this.userService.user$);
     if (!song || !user) return null;
     const data: Partial<ShowSong> = {
       ...song,
@@ -34,14 +33,14 @@ export class ShowSongService {
   }
 
   public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.showSongDataService.read$(showId, songId);
-  public read = (showId: string, songId: string): Promise<ShowSong | null> => this.read$(showId, songId).pipe(first()).toPromise();
+  public read = (showId: string, songId: string): Promise<ShowSong | null> => firstValueFrom(this.read$(showId, songId));
 
   public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId);
-  public list = (showId: string): Promise<ShowSong[]> => this.list$(showId).pipe(first()).toPromise();
+  public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
 
   public async delete$(showId: string, songId: string, index: number): Promise<void> {
     await this.showSongDataService.delete(showId, songId);
-    const show = await this.showService.read$(showId).pipe(first()).toPromise();
+    const show = await firstValueFrom(this.showService.read$(showId));
     if (!show) return;
     const order = show.order;
     order.splice(index, 1);

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

@@ -1,4 +1,4 @@
-import firebase from 'firebase/app';
+import firebase from 'firebase/compat/app';
 import Timestamp = firebase.firestore.Timestamp;
 
 export interface Show {

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

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
-import {AngularFireStorage} from '@angular/fire/storage';
-import {Observable} from 'rxjs';
+import {AngularFireStorage} from '@angular/fire/compat/storage';
+import {firstValueFrom, Observable} from 'rxjs';
 import {FileDataService} from './file-data.service';
 
 @Injectable({
@@ -16,7 +16,7 @@ export class FileService {
 
   public async delete(path: string, songId: string, fileId: string): Promise<void> {
     const ref = this.storage.ref(path);
-    await ref.delete().toPromise();
+    await firstValueFrom(ref.delete());
     await this.fileDataService.delete(songId, fileId);
   }
 }

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

@@ -1,7 +1,7 @@
 import {TestBed, waitForAsync} from '@angular/core/testing';
 
 import {SongDataService} from './song-data.service';
-import {AngularFirestore} from '@angular/fire/firestore';
+import {AngularFirestore} from '@angular/fire/compat/firestore';
 import {of} from 'rxjs';
 
 describe('SongDataService', () => {

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

@@ -1,10 +1,9 @@
 import {Injectable} from '@angular/core';
-import {Observable} from 'rxjs';
+import {firstValueFrom, Observable} from 'rxjs';
 import {Song} from './song';
 import {SongDataService} from './song-data.service';
-import {first} from 'rxjs/operators';
 import {UserService} from '../../../services/user/user.service';
-import firebase from 'firebase/app';
+import firebase from 'firebase/compat/app';
 import Timestamp = firebase.firestore.Timestamp;
 
 // declare let importCCLI: any;
@@ -27,7 +26,7 @@ export class SongService {
 
   public list$ = (): Observable<Song[]> => this.songDataService.list$(); //.pipe(tap(_ => (this.list = _)));
   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 read = (songId: string): Promise<Song | null> => firstValueFrom(this.read$(songId));
 
   public async update$(songId: string, data: Partial<Song>): Promise<void> {
     const song = await this.read(songId);

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

@@ -1,4 +1,4 @@
-import firebase from 'firebase/app';
+import firebase from 'firebase/compat/app';
 import Timestamp = firebase.firestore.Timestamp;
 
 export interface Song {

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

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {Upload} from './upload';
 import {FileDataService} from './file-data.service';
-import {AngularFireStorage} from '@angular/fire/storage';
+import {AngularFireStorage} from '@angular/fire/compat/storage';
 import {finalize} from 'rxjs/operators';
 import {FileBase} from './fileBase';
 import {FileServer} from './fileServer';

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

@@ -41,7 +41,7 @@
       <textarea
         (focus)="songtextFocus = true"
         (focusout)="songtextFocus = false"
-        [mat-autosize]="true"
+        [cdkTextareaAutosize]="true"
         formControlName="text"
         matInput
       ></textarea>
@@ -88,7 +88,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Kommentar</mat-label>
       <textarea
-        [mat-autosize]="true"
+        [cdkTextareaAutosize]="true"
         formControlName="comment"
         matInput
       ></textarea>

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

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {File} from '../../services/file';
-import {AngularFireStorage} from '@angular/fire/storage';
+import {AngularFireStorage} from '@angular/fire/compat/storage';
 import {Observable} from 'rxjs';
 
 @Component({

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

@@ -3,7 +3,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {LoginComponent} from './login/login.component';
 import {InfoComponent} from './info/info.component';
 import {LogoutComponent} from './logout/logout.component';
-import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
+import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/compat/auth-guard';
 import {PasswordComponent} from './password/password.component';
 import {PasswordSendComponent} from './password-send/password-send.component';
 import {NewComponent} from './new/new.component';

src/app/services/config.service.ts

@@ -1,8 +1,7 @@
 import {Injectable} from '@angular/core';
 import {DbService} from './db.service';
-import {Observable} from 'rxjs';
+import {firstValueFrom, Observable} from 'rxjs';
 import {Config} from './config';
-import {first} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -10,11 +9,7 @@ import {first} from 'rxjs/operators';
 export class ConfigService {
   public constructor(private db: DbService) {}
 
-  public get get$(): Observable<Config | null> {
-    return this.db.doc$<Config>('global/config');
-  }
+  public get$ = (): Observable<Config | null> => this.db.doc$<Config>('global/config');
+  public get = (): Promise<Config | null> => firstValueFrom(this.get$());
 
-  public async get(): Promise<Config | null> {
-    return await this.db.doc$<Config>('global/config').pipe(first()).toPromise();
-  }
 }

src/app/services/db.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
-import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/firestore';
+import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/compat/firestore';
 import {Observable} from 'rxjs';
-import {QueryFn} from '@angular/fire/firestore/interfaces';
+import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 import {map} from 'rxjs/operators';
 
 type CollectionPredicate<T> = string | AngularFirestoreCollection<T>;

src/app/services/user/user.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
-import {AngularFireAuth} from '@angular/fire/auth';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {filter, first, map, switchMap, tap} from 'rxjs/operators';
+import {AngularFireAuth} from '@angular/fire/compat/auth';
+import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
+import {filter, map, switchMap, tap} from 'rxjs/operators';
 import {User} from './user';
 import {DbService} from '../db.service';
 import {environment} from '../../../environments/environment';
@@ -33,17 +33,10 @@ export class UserService {
     return this.iUser$.pipe(filter(_ => !!_));
   }
 
-  public async currentUser(): Promise<User | null> {
-    return this.user$.pipe(first()).toPromise();
-  }
+  public currentUser = async (): Promise<User | null> => firstValueFrom(this.user$);
 
-  public getUserbyId(userId: string): Promise<User | null> {
-    return this.getUserbyId$(userId).pipe(first()).toPromise();
-  }
-
-  public getUserbyId$(userId: string): Observable<User | null> {
-    return this.db.doc$<User>('users/' + userId);
-  }
+  public getUserbyId = (userId: string): Promise<User | null> => firstValueFrom(this.getUserbyId$(userId));
+  public getUserbyId$ = (userId: string): Observable<User | null> => this.db.doc$<User>('users/' + userId);
 
   public async login(user: string, password: string): Promise<string | null> {
     const aUser = await this.afAuth.signInWithEmailAndPassword(user, password);
@@ -83,6 +76,6 @@ export class UserService {
     await this.router.navigateByUrl('/brand/new-user');
   }
 
-  private readUser$ = (uid: string) => this.db.doc$<User | null>('users/' + uid);
-  private readUser = async (uid: string): Promise<User | null> => await this.readUser$(uid).pipe(first()).toPromise();
+  private readUser$ = (uid: string) => this.db.doc$<User>('users/' + uid);
+  private readUser: (uid: string) => Promise<User | null> = (uid: string) => firstValueFrom(this.readUser$(uid));
 }

src/custom-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming

src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags