Update to Angular 18 (#3309)

UI/Web/src/app/_interceptors/error.interceptor.ts

@@ -1,10 +1,5 @@
 import {Injectable} from '@angular/core';
-import {
-  HttpRequest,
-  HttpHandler,
-  HttpEvent,
-  HttpInterceptor
-} from '@angular/common/http';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';

UI/Web/src/app/_interceptors/jwt.interceptor.ts

@@ -1,10 +1,5 @@
 import {Injectable} from '@angular/core';
-import {
-  HttpRequest,
-  HttpHandler,
-  HttpEvent,
-  HttpInterceptor
-} from '@angular/common/http';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
 import {Observable, switchMap} from 'rxjs';
 import { AccountService } from '../_services/account.service';
 import { take } from 'rxjs/operators';

UI/Web/src/app/_services/chapter.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {environment} from "../../environments/environment";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {Chapter} from "../_models/chapter";
 import {TextResonse} from "../_types/text-response";
 

UI/Web/src/app/_services/collection-tag.service.ts

@@ -1,4 +1,4 @@
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {environment} from 'src/environments/environment';
 import {UserCollection} from '../_models/collection-tag';

UI/Web/src/app/_services/dashboard.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {TextResonse} from "../_types/text-response";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {environment} from "../../environments/environment";
 import {DashboardStream} from "../_models/dashboard/dashboard-stream";
 

UI/Web/src/app/_services/external-source.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {environment} from "../../environments/environment";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {ExternalSource} from "../_models/sidenav/external-source";
 import {TextResonse} from "../_types/text-response";
 import {map} from "rxjs/operators";

UI/Web/src/app/_services/filter.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
 import {environment} from "../../environments/environment";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {JumpKey} from "../_models/jumpbar/jump-key";
 import {SmartFilter} from "../_models/metadata/v2/smart-filter";
 

UI/Web/src/app/_services/localization.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {environment} from "../../environments/environment";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {Language} from "../_models/metadata/language";
 
 @Injectable({

UI/Web/src/app/_services/metadata.service.ts

@@ -1,4 +1,4 @@
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {tap} from 'rxjs/operators';
 import {of} from 'rxjs';

UI/Web/src/app/_services/nav.service.ts

@@ -1,7 +1,7 @@
 import {DOCUMENT} from '@angular/common';
 import {DestroyRef, inject, Inject, Injectable, Renderer2, RendererFactory2, RendererStyleFlags2} from '@angular/core';
 import {distinctUntilChanged, filter, ReplaySubject, take} from 'rxjs';
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {environment} from "../../environments/environment";
 import {SideNavStream} from "../_models/sidenav/sidenav-stream";
 import {TextResonse} from "../_types/text-response";

UI/Web/src/app/_services/person.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import {HttpClient, HttpParams} from "@angular/common/http";
+import { HttpClient, HttpParams } from "@angular/common/http";
 import {environment} from "../../environments/environment";
 import {Person, PersonRole} from "../_models/metadata/person";
 import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";

UI/Web/src/app/_services/scrobbling.service.ts

@@ -1,4 +1,4 @@
-import {HttpClient, HttpParams} from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import { map } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';

UI/Web/src/app/_services/theme.service.ts

@@ -1,5 +1,5 @@
 import {DOCUMENT} from '@angular/common';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {
   DestroyRef,
   inject,

UI/Web/src/app/_services/volume.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {environment} from "../../environments/environment";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {Volume} from "../_models/volume";
 import {TextResonse} from "../_types/text-response";
 

UI/Web/src/app/app.component.ts

@@ -121,18 +121,18 @@ export class AppComponent implements OnInit {
     this.libraryService.getLibraryNames().pipe(take(1), shareReplay({refCount: true, bufferSize: 1})).subscribe();
 
     // Get the server version, compare vs localStorage, and if different bust locale cache
+    const versionKey = 'kavita--version';
     this.serverService.getVersion(user.apiKey).subscribe(version => {
-      const cachedVersion = localStorage.getItem('kavita--version');
+      const cachedVersion = localStorage.getItem(versionKey);
+      console.log('Kavita version: ', version, ' Running version: ', cachedVersion);
+
       if (cachedVersion == null || cachedVersion != version) {
         // Bust locale cache
-        localStorage.removeItem('@transloco/translations/timestamp');
-        localStorage.removeItem('@transloco/translations');
-        (this.translocoService as any).cache.delete(localStorage.getItem('kavita-locale') || 'en');
-        (this.translocoService as any).cache.clear();
-        localStorage.setItem('kavita--version', version);
+        this.bustLocaleCache();
+        localStorage.setItem(versionKey, version);
         location.reload();
       }
-      localStorage.setItem('kavita--version', version);
+      localStorage.setItem(versionKey, version);
     });
 
     // Every hour, have the UI check for an update. People seriously stay out of date
@@ -153,4 +153,12 @@ export class AppComponent implements OnInit {
       )
       .subscribe();
   }
+
+  private bustLocaleCache() {
+    localStorage.removeItem('@transloco/translations/timestamp');
+    localStorage.removeItem('@transloco/translations');
+    localStorage.removeItem('translocoLang');
+    (this.translocoService as any).cache.delete(localStorage.getItem('kavita-locale') || 'en');
+    (this.translocoService as any).cache.clear();
+  }
 }

UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts

@@ -30,7 +30,7 @@ import {
   take,
   tap
 } from 'rxjs';
-import {ChangeContext, LabelType, NgxSliderModule, Options} from 'ngx-slider-v2';
+import {ChangeContext, LabelType, NgxSliderModule, Options} from '@angular-slider/ngx-slider';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {NgbModal, NgbProgressbar} from '@ng-bootstrap/ng-bootstrap';

UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.html

@@ -21,7 +21,6 @@
         height="100vh"
         [(page)]="currentPage"
         [textLayer]="true"
-        [useBrowserLocale]="true"
         [showHandToolButton]="true"
         [showOpenFileButton]="false"
         [showPrintButton]="false"

UI/Web/src/app/shared/_models/download.ts

@@ -1,10 +1,4 @@
-import {
-    HttpEvent,
-    HttpEventType,
-    HttpHeaders,
-    HttpProgressEvent,
-    HttpResponse
-  } from "@angular/common/http";
+import { HttpEvent, HttpEventType, HttpHeaders, HttpProgressEvent, HttpResponse } from "@angular/common/http";
   import { Observable } from "rxjs";
   import { scan } from "rxjs/operators";
   

UI/Web/src/app/shared/_services/filter-utilities.service.ts

@@ -7,7 +7,7 @@ import {FilterStatement} from "../../_models/metadata/v2/filter-statement";
 import {FilterCombination} from "../../_models/metadata/v2/filter-combination";
 import {FilterField} from "../../_models/metadata/v2/filter-field";
 import {FilterComparison} from "../../_models/metadata/v2/filter-comparison";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {TextResonse} from "../../_types/text-response";
 import {environment} from "../../../environments/environment";
 import {map, tap} from "rxjs/operators";

UI/Web/src/httpLoader.ts

@@ -1,5 +1,5 @@
 import {Injectable} from "@angular/core";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {Translation, TranslocoLoader} from "@jsverse/transloco";
 import cacheBusting from 'i18n-cache-busting.json'; // allowSyntheticDefaultImports must be true
 

UI/Web/src/main.ts

@@ -12,7 +12,7 @@ import { AppRoutingModule } from './app/app-routing.module';
 import { Title, BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 import { JwtInterceptor } from './app/_interceptors/jwt.interceptor';
 import { ErrorInterceptor } from './app/_interceptors/error.interceptor';
-import {HTTP_INTERCEPTORS, withInterceptorsFromDi, provideHttpClient} from '@angular/common/http';
+import { HTTP_INTERCEPTORS, withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
 import {
     provideTransloco, TranslocoConfig,
     TranslocoService