Update to Angular v16

.eslintrc.json

@@ -16,8 +16,8 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
+        "plugin:@typescript-eslint/recommended",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
@@ -56,6 +56,7 @@
             "style": "camelCase"
           }
         ],
+        "@angular-eslint/no-empty-lifecycle-method": "off",
         "@typescript-eslint/naming-convention": [
           "error",
           {
@@ -64,6 +65,8 @@
             "format": ["UPPER_CASE"]
           }
         ],
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-explicit-any": "off",
         "jsdoc/no-types": [
           "off"
         ],

package.json

@@ -23,33 +23,33 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "^15.0.2",
+    "@angular/animations": "^16.2.12",
-    "@angular/cdk": "^15.0.2",
+    "@angular/cdk": "^16.2.12",
-    "@angular/common": "^15.0.2",
+    "@angular/common": "^16.2.12",
-    "@angular/compiler": "^15.0.2",
+    "@angular/compiler": "^16.2.12",
-    "@angular/core": "^15.0.2",
+    "@angular/core": "^16.2.12",
-    "@angular/forms": "^15.0.2",
+    "@angular/forms": "^16.2.12",
-    "@angular/material": "^15.0.2",
+    "@angular/material": "^16.2.12",
-    "@angular/platform-browser": "^15.0.2",
+    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^15.0.2",
+    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "^15.0.2",
+    "@angular/router": "^16.2.12",
     "@fontsource/roboto": "^4.5.8",
     "core-js": "^3.26.1",
     "hammerjs": "^2.0.8",
     "material-icons": "^1.13.1",
     "rxjs": "^7.6.0",
-    "zone.js": "^0.12.0"
+    "zone.js": "^0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.3",
+    "@angular-devkit/build-angular": "^16.2.12",
-    "@angular-eslint/builder": "^15.0.3",
+    "@angular-eslint/builder": "^16.2.12",
-    "@angular-eslint/eslint-plugin": "^15.1.0",
+    "@angular-eslint/eslint-plugin": "^16.2.12",
-    "@angular-eslint/eslint-plugin-template": "^15.1.0",
+    "@angular-eslint/eslint-plugin-template": "^16.2.12",
-    "@angular-eslint/schematics": "^15.1.0",
+    "@angular-eslint/schematics": "^16.2.12",
-    "@angular-eslint/template-parser": "^15.1.0",
+    "@angular-eslint/template-parser": "^16.2.12",
-    "@angular/cli": "~15.0.2",
+    "@angular/cli": "~16.2.12",
-    "@angular/compiler-cli": "^15.0.2",
+    "@angular/compiler-cli": "^16.2.12",
-    "@angular/language-service": "^15.0.2",
+    "@angular/language-service": "^16.2.12",
     "@types/jasmine": "~4.3.1",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "~18.11.13",
@@ -67,7 +67,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "ts-node": "~10.9.1",
-    "typescript": "~4.8.2"
+    "typescript": "~5.1.6"
   },
   "private": true
 }

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 
 import { State, DisplayMode } from './responses';
@@ -54,38 +53,38 @@ export class AppComponent implements OnInit {
   }
 
   addHotKeys(): void {
-    this.hotKeysService.addShortcut({ keys: 'ArrowUp' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'ArrowUp' }).subscribe(() =>
       this.previousSlide()
     );
-    this.hotKeysService.addShortcut({ keys: 'ArrowDown' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'ArrowDown' }).subscribe(() =>
       this.nextSlide()
     );
-    this.hotKeysService.addShortcut({ keys: 'PageUp' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'PageUp' }).subscribe(() =>
       this.previousSlide()
     );
-    this.hotKeysService.addShortcut({ keys: 'PageDown' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'PageDown' }).subscribe(() =>
       this.nextSlide()
     );
-    this.hotKeysService.addShortcut({ keys: 'ArrowLeft' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'ArrowLeft' }).subscribe(() =>
       this.previousItem()
     );
-    this.hotKeysService.addShortcut({ keys: 'ArrowRight' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'ArrowRight' }).subscribe(() =>
       this.nextItem()
     );
-    this.hotKeysService.addShortcut({ keys: 'Space' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'Space' }).subscribe(() =>
       {
         if (this.state.displayMode !== DisplayMode.Presentation) {
           this.showDisplay();
         }
       }
     );
-    this.hotKeysService.addShortcut({ keys: 't' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 't' }).subscribe(() =>
       this.state.displayMode === DisplayMode.Theme ? this.showDisplay() : this.themeDisplay()
     );
-    this.hotKeysService.addShortcut({ keys: 'code.Period' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'code.Period' }).subscribe(() =>
       this.state.displayMode === DisplayMode.Blank ? this.showDisplay() : this.blankDisplay()
     );
-    this.hotKeysService.addShortcut({ keys: 'd' }).subscribe(_ =>
+    this.hotKeysService.addShortcut({ keys: 'd' }).subscribe(() =>
       this.state.displayMode === DisplayMode.Desktop ? this.showDisplay() : this.desktopDisplay()
     );
   }
@@ -122,13 +121,13 @@ export class AppComponent implements OnInit {
   }
 
   nextSlide() {
-    this.openlpService.nextSlide().subscribe( _ =>
+    this.openlpService.nextSlide().subscribe(() =>
       this.hotKeysService.scrollToCurrentItem('slide', 'start')
     );
   }
 
   previousSlide() {
-    this.openlpService.previousSlide().subscribe(_ =>
+    this.openlpService.previousSlide().subscribe(() =>
       this.hotKeysService.scrollToCurrentItem('slide', 'end')
     );
   }

src/app/app.module.ts

@@ -107,9 +107,6 @@ import { StageChordPreviewComponent } from './components/settings/stage-chord-pr
     Title,
     WindowRef
   ],
-  entryComponents: [
-    LoginComponent
-  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/alert/alert.component.ts

@@ -21,6 +21,6 @@ export class AlertComponent {
   }
 
   onSubmit() {
-    this.openlpService.showAlert(this.alert).subscribe(res => this.snackBar.open('Alert submitted', '', {duration: 2000}));
+    this.openlpService.showAlert(this.alert).subscribe(() => this.snackBar.open('Alert submitted', '', {duration: 2000}));
   }
 }

src/app/components/chord-view/chord-view.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Slide } from '../../responses';
 import { StageViewComponent } from '../stage-view/stage-view.component';
 

src/app/components/chord-view/chordpro.pipe.ts

@@ -10,7 +10,6 @@
  * @licence Use this in any way you like, with no constraints.
  */
 import { Pipe, PipeTransform } from '@angular/core';
-import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY } from '@angular/material/autocomplete';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Pipe({ name: 'chordpro' })

src/app/components/login/login.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Credentials } from '../../responses';
 import { MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { OpenLPService } from '../../openlp.service';
@@ -16,6 +15,7 @@ export class LoginComponent implements OnInit {
               private snackBar: MatSnackBar) { }
 
   ngOnInit() {
+    // Do nothing
   }
 
   performLogin() {
@@ -24,7 +24,7 @@ export class LoginComponent implements OnInit {
         this.snackBar.open('Successfully logged in', '', {duration: 2000});
         this.dialogRef.close(result);
       },
-      err => this.snackBar.open('Login failed', '', {duration: 2000})
+      () => this.snackBar.open('Login failed', '', {duration: 2000})
     );
   }
 }

src/app/components/lower-third/lower-third.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { SettingsProperties, SettingsService } from 'src/app/settings.service';
+import { SettingsService } from 'src/app/settings.service';
 import { OpenLPService } from '../../openlp.service';
 import { ServiceItem, Slide } from '../../responses';
 
@@ -34,27 +34,27 @@ export class LowerThirdComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.updateCurrentSlides(null, null);
+    this.updateCurrentSlides();
-    this.openlpService.stateChanged$.subscribe(item => this.updateCurrentSlides(item.item, item.slide));
+    this.openlpService.stateChanged$.subscribe(() => this.updateCurrentSlides());
   }
 
   ngOnDestroy(): void {
   }
 
-  updateCurrentSlides(serviceItemId: string, currentSlide: number): void {
+  updateCurrentSlides(): void {
     this.serviceItemSubscription$?.unsubscribe();
     this.serviceItemSubscription$ = this.openlpService.getServiceItem().subscribe(serviceItem => {
       this.serviceItem = serviceItem;
       if (serviceItem instanceof Array) {
-        this.setNewSlides(serviceItem, currentSlide);
+        this.setNewSlides(serviceItem);
       }
       else {
-        this.setNewSlides(serviceItem.slides, currentSlide);
+        this.setNewSlides(serviceItem.slides);
        }
     });
   }
 
-  setNewSlides(slides: Slide[], currentSlide: number): void {
+  setNewSlides(slides: Slide[]): void {
     if (slides.length === 0) {
       return;
     }

src/app/components/main-view/main-view.component.ts

@@ -12,7 +12,7 @@ export class MainViewComponent implements OnInit {
 
   ngOnInit() {
     this.updateImage();
-    this.openlpService.stateChanged$.subscribe(item => this.updateImage());
+    this.openlpService.stateChanged$.subscribe(() => this.updateImage());
   }
 
   updateImage(): void {

src/app/components/search/search-options/search-options.component.ts

@@ -40,7 +40,7 @@ export class SearchOptionsComponent {
   }
 
   setSearchOption(target) {
-    this.openlpService.setSearchOption(this.selectedPlugin, 'primary bible', target.value).subscribe(res => {});
+    this.openlpService.setSearchOption(this.selectedPlugin, 'primary bible', target.value).subscribe(() => {});
     this.selectedSearchOption = target.value;
   }
 }

src/app/components/search/search.component.ts

@@ -45,11 +45,11 @@ export class SearchComponent implements OnInit, AfterViewInit {
   }
 
   sendLive(id) {
-    this.openlpService.sendItemLive(this.currentPlugin, id).subscribe(res => {});
+    this.openlpService.sendItemLive(this.currentPlugin, id).subscribe(() => {});
   }
 
   addToService(id) {
-    this.openlpService.addItemToService(this.currentPlugin, id).subscribe(res => {});
+    this.openlpService.addItemToService(this.currentPlugin, id).subscribe(() => {});
   }
 
   ngOnInit() {

src/app/components/service/service-list/service-list.component.ts

@@ -34,7 +34,7 @@ export class ServiceListComponent implements OnInit, OnDestroy {
   }
 
   constructor(private openlpService: OpenLPService) {
-    this._subscription = openlpService.stateChanged$.subscribe(state => {
+    this._subscription = openlpService.stateChanged$.subscribe(() => {
       this.fetchServiceItems();
     });
   }

src/app/components/settings/settings.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { OpenLPService } from '../../openlp.service';
 import { PageTitleService } from '../../page-title.service';

src/app/components/slides/slide-list/slide-list.component.ts

@@ -20,7 +20,7 @@ export class SlideListComponent implements OnInit, OnDestroy {
   isServiceItemChanged: boolean;
 
   constructor(private openlpService: OpenLPService, private hotKeysService: HotKeysService) {
-    this._subscription = openlpService.stateChanged$.subscribe(_ =>
+    this._subscription = openlpService.stateChanged$.subscribe(() =>
       this.fetchSlides()
     );
   }

src/app/components/stage-view/stage-view-item/stage-view-item.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Slide } from '../../../responses';
 
 @Component({

src/app/components/stage-view/stage-view.component.ts

@@ -84,7 +84,7 @@ export class StageViewComponent implements OnInit, OnDestroy {
     this.nextServiceItemTitle = '';
     let doStoreServiceItemTitle = false;
     this.openlpService.getServiceItems().subscribe(serviceItems => {
-      serviceItems.forEach((serviceItem, _index) => {
+      serviceItems.forEach((serviceItem) => {
         if (doStoreServiceItemTitle) {
           this.nextServiceItemTitle = serviceItem.title;
           doStoreServiceItemTitle = false;
@@ -96,7 +96,7 @@ export class StageViewComponent implements OnInit, OnDestroy {
     });
   }
 
-  setNewSlides(slides: Slide[], _currentSlide: number): void {
+  setNewSlides(slides: Slide[], _currentSlide: number): void { /* eslint-disable-line @typescript-eslint/no-unused-vars */
     if (slides.length === 0) {
       return;
     }

src/app/hotkeys.service.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 interface Options {
   element: any;
   keys: string;
-};
+}
 
 @Injectable({ providedIn: 'root' })
 export class HotKeysService {

src/app/openlp-websocket.ts

@@ -1,5 +1,3 @@
-
-import { Type } from '@angular/core';
 import { Observable } from 'rxjs';
 
 export function createWebSocket<T>(

src/app/openlp.service.ts

@@ -246,7 +246,7 @@ export class OpenLPService {
             this.createMessageWebsocketConnection(info.websocket_port);
           }
         },
-        error: _ => this.reconnectWebSocket()
+        error: () => this.reconnectWebSocket()
       });
   }
 
@@ -269,7 +269,7 @@ export class OpenLPService {
         }
         this.handleStateChange(state);
       },
-      error: (e) => {
+      error: () => {
         this.webSocketStateChanged$.emit(WebSocketStatus.Closed);
         this.reconnectWebSocket();
       },
@@ -292,7 +292,7 @@ export class OpenLPService {
       'messages',
     ).subscribe({
       next: (message) => this.handleMessage(message),
-      error: (e) => this.reconnectWebSocket(),
+      error: () => this.reconnectWebSocket(),
       complete: () => this.reconnectWebSocket()
     });
   }

src/app/settings.service.ts

@@ -5,7 +5,7 @@ export class SettingsProperties {
     fastSwitching = false;
     stageFontScale = 100;
     chordsFontScale = 100;
-};
+}
 
 export interface SettingsPropertiesItem<SP extends keyof SettingsProperties, SV = SettingsProperties[SP]> {
     property: SP;

src/app/utils.ts

@@ -9,4 +9,4 @@ export function deserialize<T>(json: any, cls: Type<T>): T {
     inst[p] = json[p];
   }
   return inst;
-};
+}

src/tsconfig.app.json

@@ -9,5 +9,9 @@
   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"
+  ],
+  "files": [
+    "main.ts",
+    "polyfills.ts"
   ]
 }