Angular 17 (#2422)

.github/workflows/canary-workflow.yml

@@ -66,7 +66,7 @@ jobs:
           - name: NodeJS to Compile WebUI
             uses: actions/setup-node@v3
             with:
-                node-version: '16'
+                node-version: '18.13.x'
           - run: |
                 cd UI/Web || exit
                 echo 'Installing web dependencies'

.github/workflows/develop-workflow.yml

@@ -99,7 +99,7 @@ jobs:
       - name: NodeJS to Compile WebUI
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18.13.x'
       - run: |
           cd UI/Web || exit
           echo 'Installing web dependencies'

.github/workflows/release-workflow.yml

@@ -84,7 +84,7 @@ jobs:
       - name: NodeJS to Compile WebUI
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18.13.x'
       - run: |
 
           cd UI/Web || exit

CONTRIBUTING.md

@@ -12,7 +12,7 @@ Setup guides, FAQ, the more information we have on the [wiki](https://wiki.kavit
 - Rider (optional to Visual Studio) (https://www.jetbrains.com/rider/)  
 - HTML/Javascript editor of choice (VS Code/Sublime Text/Webstorm/Atom/etc)
 - [Git](https://git-scm.com/downloads)
-- [NodeJS](https://nodejs.org/en/download/) (Node 16.X.X or higher)
+- [NodeJS](https://nodejs.org/en/download/) (Node 18.13.X or higher)
 - .NET 7.0+
 - dotnet tool install -g --version 6.4.0 Swashbuckle.AspNetCore.Cli
 

UI/Web/angular.json

@@ -24,11 +24,11 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -53,9 +53,7 @@
               "scripts": true,
               "styles": true
             },
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "optimization": false,
             "namedChunks": true
           },
@@ -71,7 +69,6 @@
               "outputHashing": "all",
               "namedChunks": false,
               "extractLicenses": true,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -81,7 +78,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kb",
-                  "maximumError": "6kb"
+                  "maximumError": "30kb"
                 }
               ]
             }
@@ -94,18 +91,18 @@
             "sslKey": "./ssl/server.key",
             "sslCert": "./ssl/server.crt",
             "ssl": false,
-            "browserTarget": "kavita-webui:build"
+            "buildTarget": "kavita-webui:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "kavita-webui:build:production"
+              "buildTarget": "kavita-webui:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "kavita-webui:build"
+            "buildTarget": "kavita-webui:build"
           }
         },
         "lint": {

UI/Web/minify-json.js

@@ -1,8 +1,8 @@
 const fs = require('fs');
 const jsonminify = require('jsonminify');
 
-const jsonFilesDir = 'dist/assets/langs'; // Adjust the path to your JSON files
+const jsonFilesDir = 'dist/browser/assets/langs'; // Adjust the path to your JSON files
-const outputDir = 'dist/assets/langs'; // Directory to store minified files
+const outputDir = 'dist/browser/assets/langs'; // Directory to store minified files
 
 fs.readdirSync(jsonFilesDir).forEach(file => {
     if (file.endsWith('.json')) {

UI/Web/package.json

@@ -13,16 +13,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.12",
+    "@angular/animations": "^17.0.1",
-    "@angular/cdk": "^16.2.11",
+    "@angular/cdk": "^17.0.0",
-    "@angular/common": "^16.2.12",
+    "@angular/common": "^17.0.1",
-    "@angular/compiler": "^16.2.12",
+    "@angular/compiler": "^17.0.1",
-    "@angular/core": "^16.2.12",
+    "@angular/core": "^17.0.1",
-    "@angular/forms": "^16.2.12",
+    "@angular/forms": "^17.0.1",
-    "@angular/localize": "^16.2.12",
+    "@angular/localize": "^17.0.1",
-    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser": "^17.0.1",
-    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^17.0.1",
-    "@angular/router": "^16.2.12",
+    "@angular/router": "^17.0.1",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@iharbeck/ngx-virtual-scroller": "^16.0.0",
     "@iplab/ngx-file-upload": "^16.0.2",
@@ -36,14 +36,14 @@
     "@popperjs/core": "^2.11.7",
     "@swimlane/ngx-charts": "^20.1.2",
     "@tweenjs/tween.js": "^21.0.0",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "^5.3.2",
     "charts.css": "^1.1.0",
     "luxon": "^3.4.3",
     "ng-circle-progress": "^1.7.1",
     "ng-lazyload-image": "^9.1.3",
     "ng-select2-component": "^13.0.9",
     "ngx-color-picker": "^15.0.0",
-    "ngx-extended-pdf-viewer": "^18.1.4",
+    "ngx-extended-pdf-viewer": "^18.1.5",
     "ngx-file-drop": "^16.0.0",
     "ngx-slider-v2": "^16.0.2",
     "ngx-stars": "^1.6.5",
@@ -52,27 +52,27 @@
     "screenfull": "^6.0.2",
     "swiper": "^8.4.6",
     "tslib": "^2.6.2",
-    "zone.js": "^0.13.0"
+    "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.9",
+    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular-eslint/builder": "^16.2.0",
+    "@angular-eslint/builder": "^17.0.0",
-    "@angular-eslint/eslint-plugin": "^16.2.0",
+    "@angular-eslint/eslint-plugin": "^17.0.0",
-    "@angular-eslint/eslint-plugin-template": "^16.2.0",
+    "@angular-eslint/eslint-plugin-template": "^17.0.0",
-    "@angular-eslint/schematics": "^16.2.0",
+    "@angular-eslint/schematics": "^17.0.1",
-    "@angular-eslint/template-parser": "^16.2.0",
+    "@angular-eslint/template-parser": "^17.0.1",
-    "@angular/cli": "^16.2.9",
+    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^16.2.12",
+    "@angular/compiler-cli": "^17.0.1",
-    "@types/d3": "^7.4.2",
+    "@types/d3": "^7.4.3",
-    "@types/luxon": "^3.3.3",
+    "@types/luxon": "^3.3.4",
-    "@types/node": "^20.8.10",
+    "@types/node": "^20.9.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "jsonminify": "^0.4.2",
     "karma-coverage": "~2.2.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "webpack-bundle-analyzer": "^4.9.1"
   }
 }

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts

@@ -1,6 +1,7 @@
-import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {
+  afterNextRender,
+  AfterRenderPhase, AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -95,7 +96,6 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   @ContentChild('cardItem') itemTemplate!: TemplateRef<any>;
   @ContentChild('noData') noDataTemplate!: TemplateRef<any>;
   @ViewChild('.jump-bar') jumpBar!: ElementRef<HTMLDivElement>;
-  @ViewChild('scroller') scroller!: CdkVirtualScrollViewport;
 
   @ViewChild(VirtualScrollerComponent) private virtualScroller!: VirtualScrollerComponent;
 
@@ -110,6 +110,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
 
   constructor(@Inject(DOCUMENT) private document: Document) {}
 
+
   @HostListener('window:resize', ['$event'])
   @HostListener('window:orientationchange', ['$event'])
   resizeJumpBar() {
@@ -139,8 +140,6 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
         this.virtualScroller.refresh();
       });
     }
-
-
   }
 
 

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html

@@ -419,9 +419,16 @@
                   <app-api-key [tooltipText]="t('clients-api-key-tooltip')" [hideData]="true"></app-api-key>
                   <app-api-key [title]="t('clients-opds-url-tooltip')" [hideData]="true" [showRefresh]="false" [transform]="makeUrl"></app-api-key>
                 </ng-container>
+<!--                @defer (when tab.fragment === FragmentID.Theme; prefetch on idle) {-->
+<!--                  <app-theme-manager></app-theme-manager>-->
+<!--                }-->
+<!--                @placeholder {-->
+<!--                  <app-loading [loading]="true"></app-loading>-->
+<!--                }-->
                 <ng-container *ngIf="tab.fragment === FragmentID.Theme">
                   <app-theme-manager></app-theme-manager>
                 </ng-container>
+
                 <ng-container *ngIf="tab.fragment === FragmentID.Devices">
                   <app-manage-devices></app-manage-devices>
                 </ng-container>

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts

@@ -54,6 +54,7 @@ import {
   TranslocoPersistTranslations
 } from "@ngneat/transloco-persist-translations";
 import {HttpLoader} from "../../../httpLoader";
+import {LoadingComponent} from "../../shared/loading/loading.component";
 
 enum AccordionPanelID {
   ImageReader = 'image-reader',
@@ -81,7 +82,7 @@ enum FragmentID {
     ChangePasswordComponent, ChangeAgeRestrictionComponent, AnilistKeyComponent, ReactiveFormsModule, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader,
     NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, NgbTooltip, NgTemplateOutlet, ColorPickerModule, ApiKeyComponent,
     ThemeManagerComponent, ManageDevicesComponent, UserStatsComponent, UserScrobbleHistoryComponent, UserHoldsComponent, NgbNavOutlet, TitleCasePipe, SentenceCasePipe,
-    TranslocoDirective],
+    TranslocoDirective, LoadingComponent],
 })
 export class UserPreferencesComponent implements OnInit, OnDestroy {
 

build.sh

@@ -25,16 +25,6 @@ ProgressEnd()
     echo "Finish '$1'"
 }
 
-UpdateVersionNumber()
-{
-  # TODO: Read from KavitaCommon and update in Info.plist
-    if [ "$KAVITAVERSION" != "" ]; then
-        echo "Updating Version Info"
-        sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$KAVITAVERSION<\/AssemblyVersion>/g" src/Directory.Build.props
-        sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BUILD_SOURCEBRANCHNAME}<\/AssemblyConfiguration>/g" src/Directory.Build.props
-        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$KAVITAVERSION<\/string>/g" macOS/Kavita.app/Contents/Info.plist
-    fi
-}
 
 Build()
 {
@@ -63,12 +53,12 @@ BuildUI()
     rm -rf API/wwwroot/*
     cd UI/Web/ || exit
     echo 'Installing web dependencies'
-    npm ci --legacy-peer-deps
+    npm install --legacy-peer-deps
     echo 'Building UI'
     npm run prod
     echo 'Copying back to Kavita wwwroot'
     mkdir -p ../../API/wwwroot
-    cp -R dist/* ../../API/wwwroot
+    cp -R dist/browser/* ../../API/wwwroot
     cd ../../ || exit
     ProgressEnd 'Building UI'
 }

docker-build.sh

@@ -47,7 +47,7 @@ BuildUI()
     echo 'Building UI'
     npm run prod
     echo 'Copying back to Kavita wwwroot'
-    cp -r dist/* ../Kavita/API/wwwroot
+    cp -r dist/browser/* ../Kavita/API/wwwroot
     cd ../Kavita/ || exit
     ProgressEnd 'Building UI'
 }

openapi.json

@@ -7,7 +7,7 @@
       "name": "GPL-3.0",
       "url": "https://github.com/Kareadita/Kavita/blob/develop/LICENSE"
     },
-    "version": "0.7.10.6"
+    "version": "0.7.10.8"
   },
   "servers": [
     {