Merge pull request #725 from Cucumberrbob/deps/angular-19-update

Update to Angular 19, replace `@angular/flex-layout` with css

client/angular.json

@@ -37,17 +37,21 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "../server/RdtClient.Web/wwwroot",
+            "outputPath": {
+              "base": "../server/RdtClient.Web/wwwroot"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "polyfills": [
-            "polyfills": "src/polyfills.ts",
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -72,9 +76,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -83,24 +85,24 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "proxyConfig": "angular-proxy.json"
           },
           "configurations": {
             "production": {
-              "browserTarget": "client:build:production"
+              "buildTarget": "client:build:production"
             },
             "development": {
-              "browserTarget": "client:build:development"
+              "buildTarget": "client:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "browserTarget": "client:build"
+            "buildTarget": "client:build"
           }
         },
         "lint": {

client/package.json

@@ -12,43 +12,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.3",
+    "@angular/animations": "^19.2.0",
-    "@angular/cdk": "^16.2.2",
+    "@angular/cdk": "^19.2.1",
-    "@angular/common": "^16.2.3",
+    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^16.2.3",
+    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^16.2.3",
+    "@angular/core": "^19.2.0",
-    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^19.2.0",
-    "@angular/forms": "^16.2.3",
+    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser": "^16.2.3",
+    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^16.2.3",
+    "@angular/router": "^19.2.0",
-    "@angular/router": "^16.2.3",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@microsoft/signalr": "^6.0.21",
     "bulma": "^0.9.4",
     "curray": "^1.0.11",
     "file-saver-es": "^2.0.5",
-    "ngx-filesize": "^3.0.2",
+    "ngx-filesize": "^3.0.5",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
-    "zone.js": "~0.13.1"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.1",
+    "@angular-eslint/builder": "19.1.0",
-    "@angular-eslint/builder": "16.1.1",
+    "@angular-eslint/eslint-plugin": "19.1.0",
-    "@angular-eslint/eslint-plugin": "16.1.1",
+    "@angular-eslint/eslint-plugin-template": "19.1.0",
-    "@angular-eslint/eslint-plugin-template": "16.1.1",
+    "@angular-eslint/schematics": "19.1.0",
-    "@angular-eslint/schematics": "16.1.1",
+    "@angular-eslint/template-parser": "19.1.0",
-    "@angular-eslint/template-parser": "16.1.1",
+    "@angular/build": "^19.2.0",
-    "@angular/cli": "^16.2.1",
+    "@angular/cli": "^19.2.0",
-    "@angular/compiler-cli": "^16.2.3",
+    "@angular/compiler-cli": "^19.2.0",
-    "@angular/language-service": "^16.2.3",
+    "@angular/language-service": "^19.2.0",
     "@types/file-saver": "^2.0.5",
     "@types/file-saver-es": "^2.0.1",
     "@types/node": "^20.5.8",
-    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "6.5.0",
+    "@typescript-eslint/parser": "^7.2.0",
-    "eslint": "^8.48.0",
+    "eslint": "^8.57.0",
     "prettier": "^3.0.3",
-    "typescript": "5.1.6"
+    "typescript": "5.7.3"
   }
 }

client/src/app/add-new-torrent/add-new-torrent.component.html

@@ -1,5 +1,5 @@
-<div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px" class="field">
+<div class="field">
-  <div fxFlex>
+  <div>
     <div class="field">
       <label class="label">Torrent file</label>
       <div class="file has-name">

client/src/app/add-new-torrent/add-new-torrent.component.ts

@@ -5,9 +5,10 @@ import { Torrent, TorrentFileAvailability } from '../models/torrent.model';
 import { SettingsService } from '../settings.service';
 
 @Component({
-  selector: 'app-add-new-torrent',
+    selector: 'app-add-new-torrent',
-  templateUrl: './add-new-torrent.component.html',
+    templateUrl: './add-new-torrent.component.html',
-  styleUrls: ['./add-new-torrent.component.scss'],
+    styleUrls: ['./add-new-torrent.component.scss'],
+    standalone: false
 })
 export class AddNewTorrentComponent implements OnInit {
   public fileName: string;

client/src/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  template: '<router-outlet></router-outlet>',
+    template: '<router-outlet></router-outlet>',
-  styles: [],
+    styles: [],
+    standalone: false
 })
 export class AppComponent {}

client/src/app/app.module.ts

@@ -1,8 +1,7 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { APP_BASE_HREF } from '@angular/common';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { curray } from 'curray';
@@ -45,20 +44,13 @@ curray();
     Nl2BrPipe,
     SortPipe,
   ],
-  imports: [
+  bootstrap: [AppComponent],
-    BrowserModule,
+  imports: [BrowserModule, AppRoutingModule, FormsModule, NgxFilesizeModule, ClipboardModule],
-    AppRoutingModule,
-    FormsModule,
-    HttpClientModule,
-    NgxFilesizeModule,
-    FlexLayoutModule,
-    ClipboardModule,
-  ],
   providers: [
     FileSizePipe,
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     { provide: APP_BASE_HREF, useValue: (window as any)['_app_base'] || '/' },
+    provideHttpClient(withInterceptorsFromDi()),
   ],
-  bootstrap: [AppComponent],
 })
 export class AppModule {}

client/src/app/decode-uri.pipe.ts

@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'decodeURI',
+    name: 'decodeURI',
+    standalone: false
 })
 export class DecodeURIPipe implements PipeTransform {
   transform(input: any) {

client/src/app/download-status.pipe.ts

@@ -3,7 +3,8 @@ import { FileSizePipe } from 'ngx-filesize';
 import { Download } from './models/download.model';
 
 @Pipe({
-  name: 'downloadStatus',
+    name: 'downloadStatus',
+    standalone: false
 })
 export class DownloadStatusPipe implements PipeTransform {
   constructor(private pipe: FileSizePipe) {}

client/src/app/login/login.component.ts

@@ -3,9 +3,10 @@ import { Router } from '@angular/router';
 import { AuthService } from '../auth.service';
 
 @Component({
-  selector: 'app-login',
+    selector: 'app-login',
-  templateUrl: './login.component.html',
+    templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss'],
+    styleUrls: ['./login.component.scss'],
+    standalone: false
 })
 export class LoginComponent {
   public userName: string;

client/src/app/main-layout/main-layout.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-main-layout',
+    selector: 'app-main-layout',
-  templateUrl: './main-layout.component.html',
+    templateUrl: './main-layout.component.html',
-  styleUrls: ['./main-layout.component.scss'],
+    styleUrls: ['./main-layout.component.scss'],
+    standalone: false
 })
 export class MainLayoutComponent {
   constructor() {}

client/src/app/navbar/navbar.component.ts

@@ -5,9 +5,10 @@ import { Profile } from '../models/profile.model';
 import { SettingsService } from '../settings.service';
 
 @Component({
-  selector: 'app-navbar',
+    selector: 'app-navbar',
-  templateUrl: './navbar.component.html',
+    templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss'],
+    styleUrls: ['./navbar.component.scss'],
+    standalone: false
 })
 export class NavbarComponent implements OnInit {
   public showMobileMenu = false;

client/src/app/nl2br.pipe.ts

@@ -2,7 +2,8 @@ import { Pipe, PipeTransform, SecurityContext, VERSION } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Pipe({
-  name: 'nl2br',
+    name: 'nl2br',
+    standalone: false
 })
 export class Nl2BrPipe implements PipeTransform {
   constructor(private sanitizer: DomSanitizer) {}

client/src/app/profile/profile.component.ts

@@ -2,9 +2,10 @@ import { Component } from '@angular/core';
 import { AuthService } from '../auth.service';
 
 @Component({
-  selector: 'app-profile',
+    selector: 'app-profile',
-  templateUrl: './profile.component.html',
+    templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss'],
+    styleUrls: ['./profile.component.scss'],
+    standalone: false
 })
 export class ProfileComponent {
   constructor(private authService: AuthService) {}

client/src/app/settings/settings.component.ts

@@ -3,9 +3,10 @@ import { SettingsService } from 'src/app/settings.service';
 import { Setting } from '../models/setting.model';
 
 @Component({
-  selector: 'app-settings',
+    selector: 'app-settings',
-  templateUrl: './settings.component.html',
+    templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.scss'],
+    styleUrls: ['./settings.component.scss'],
+    standalone: false
 })
 export class SettingsComponent implements OnInit {
   public activeTab = 0;

client/src/app/setup/setup.component.ts

@@ -3,9 +3,10 @@ import { Router } from '@angular/router';
 import { AuthService } from '../auth.service';
 
 @Component({
-  selector: 'app-setup',
+    selector: 'app-setup',
-  templateUrl: './setup.component.html',
+    templateUrl: './setup.component.html',
-  styleUrls: ['./setup.component.scss'],
+    styleUrls: ['./setup.component.scss'],
+    standalone: false
 })
 export class SetupComponent {
   public userName: string;

client/src/app/sort.pipe.ts

@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'sort',
+    name: 'sort',
+    standalone: false
 })
 export class SortPipe implements PipeTransform {
   transform(array: any[], field: string, order: 'asc' | 'desc' = 'asc'): any[] {

client/src/app/torrent-status.pipe.ts

@@ -3,7 +3,8 @@ import { FileSizePipe } from 'ngx-filesize';
 import { RealDebridStatus, Torrent } from './models/torrent.model';
 
 @Pipe({
-  name: 'status',
+    name: 'status',
+    standalone: false
 })
 export class TorrentStatusPipe implements PipeTransform {
   constructor(private pipe: FileSizePipe) {}

client/src/app/torrent-table/torrent-table.component.html

@@ -64,7 +64,7 @@
     </tbody>
   </table>
 
-  <div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px">
+  <div class="flex-container">
     <button
       class="button is-danger"
       (click)="showDeleteModal()"

client/src/app/torrent-table/torrent-table.component.scss

@@ -3,3 +3,14 @@ table {
     cursor: pointer;
   }
 }
+
+.flex-container {
+  display: flex;
+  flex: 1 1 0;
+  gap: 20px;
+  flex-direction: row;
+
+  @media screen and (max-width: 1279px) {
+    flex-direction: column;
+  }
+}

client/src/app/torrent-table/torrent-table.component.ts

@@ -5,9 +5,10 @@ import { TorrentService } from '../torrent.service';
 import { forkJoin, Observable } from 'rxjs';
 
 @Component({
-  selector: 'app-torrent-table',
+    selector: 'app-torrent-table',
-  templateUrl: './torrent-table.component.html',
+    templateUrl: './torrent-table.component.html',
-  styleUrls: ['./torrent-table.component.scss'],
+    styleUrls: ['./torrent-table.component.scss'],
+    standalone: false
 })
 export class TorrentTableComponent implements OnInit {
   public torrents: Torrent[] = [];

client/src/app/torrent/torrent.component.html

@@ -18,8 +18,8 @@
   </div>
 </div>
 <div *ngIf="torrent !== null && torrent !== undefined">
-  <div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px" *ngIf="activeTab === 0">
+  <div class="flex-container" *ngIf="activeTab === 0">
-    <div fxFlex>
+    <div style="flex: 1 1 0">
       <div class="field is-grouped">
         <div class="control">
           <button class="button is-danger" (click)="showDeleteModal()">Delete Torrent</button>
@@ -129,7 +129,7 @@
         </ng-container>
       </div>
     </div>
-    <div fxFlex>
+    <div style="flex: 1 1 0">
       <div class="field">
         <label class="label">Real-Debrid ID</label>
         {{ torrent.rdId }}
@@ -251,8 +251,8 @@
             <tr *ngIf="downloadExpanded[download.downloadId]" class="separator">
               <td style="width: 35px"></td>
               <td colspan="5">
-                <div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px">
+                <div class="flex-container">
-                  <div fxFlex>
+                  <div style="flex: 1 1 0;">
                     <div class="field is-grouped">
                       <div class="control">
                         <button class="button is-primary" (click)="showDownloadRetryModal(download.downloadId)">
@@ -285,7 +285,7 @@
                       {{ download.retryCount }} / {{ torrent.downloadRetryAttempts }}
                     </div>
                   </div>
-                  <div fxFlex>
+                  <div style="flex: 1 1 0;">
                     <div class="field">
                       <label class="label">Added</label>
                       <ng-container *ngIf="download.added">

client/src/app/torrent/torrent.component.scss

@@ -9,5 +9,16 @@ table {
 }
 
 .fa-download {
-  margin-left :12px;
+  margin-left: 12px;
-}
+}
+
+.flex-container {
+  display: flex;
+  flex: 1 1 0;
+  gap: 20px;
+  flex-direction: row;
+
+  @media screen and (max-width: 1279px) {
+    flex-direction: column;
+  }
+}

client/src/app/torrent/torrent.component.ts

@@ -5,9 +5,10 @@ import { Torrent } from '../models/torrent.model';
 import { TorrentService } from '../torrent.service';
 
 @Component({
-  selector: 'app-torrent',
+    selector: 'app-torrent',
-  templateUrl: './torrent.component.html',
+    templateUrl: './torrent.component.html',
-  styleUrls: ['./torrent.component.scss'],
+    styleUrls: ['./torrent.component.scss'],
+    standalone: false
 })
 export class TorrentComponent implements OnInit {
   public torrent: Torrent;

client/src/styles.scss

@@ -1,2 +1,2 @@
-@import "../node_modules/bulma/bulma.sass";
+@forward "../node_modules/bulma/bulma.sass";
-@import "../node_modules/@fortawesome/fontawesome-free/css/all.css";
+@forward "../node_modules/@fortawesome/fontawesome-free/css/all.css";

client/tsconfig.json

@@ -5,6 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
@@ -12,7 +13,6 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,