Angular update to angular20

frontend/angular.json

@@ -15,17 +15,21 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/dres-frontend",
+            "outputPath": {
+              "base": "dist/dres-frontend"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": ["src/immutable", "src/config.json"],
             "styles": ["./node_modules/@angular/material/prebuilt-themes/purple-green.css", "src/styles.scss", "src/flex.scss"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -40,8 +44,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -56,10 +58,8 @@
               ]
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
               "extractLicenses": false,
-              "vendorChunk": true,
               "namedChunks": true,
               "sourceMap": true
             }
@@ -68,22 +68,22 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "dres-frontend:build"
+            "buildTarget": "dres-frontend:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "dres-frontend:build:production"
+              "buildTarget": "dres-frontend:build:production"
             },
             "development": {
-              "browserTarget": "dres-frontend:build:development"
+              "buildTarget": "dres-frontend:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "dres-frontend:build"
+            "buildTarget": "dres-frontend:build"
           }
         },
         "test": {
@@ -125,5 +125,31 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

frontend/package.json

@@ -21,34 +21,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.x",
-    "@angular/cdk": "15.x",
-    "@angular/common": "15.x",
-    "@angular/compiler": "15.x",
-    "@angular/core": "15.x",
-    "@angular/forms": "15.x",
-    "@angular/material": "15.x",
-    "@angular/platform-browser": "15.x",
-    "@angular/platform-browser-dynamic": "15.x",
-    "@angular/router": "15.x",
-    "angularx-qrcode": "15.x",
+    "@angular/animations": "20.3.19",
+    "@angular/cdk": "20.2.14",
+    "@angular/common": "20.3.19",
+    "@angular/compiler": "20.3.19",
+    "@angular/core": "20.3.19",
+    "@angular/forms": "20.3.19",
+    "@angular/material": "20.2.14",
+    "@angular/platform-browser": "20.3.19",
+    "@angular/platform-browser-dynamic": "20.3.19",
+    "@angular/router": "20.3.19",
+    "angularx-qrcode": "20.0.0",
     "apexcharts": "3.x",
     "ng-apexcharts": "1.x",
     "ngx-color-picker": "^14.0.0",
     "rxjs": "7.x",
     "tslib": "2.x",
-    "zone.js": "0.13.x"
+    "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.x",
+    "@angular-devkit/build-angular": "20.3.25",
     "@angular-eslint/builder": "15.x",
-    "@angular-eslint/eslint-plugin": "15.x",
-    "@angular-eslint/eslint-plugin-template": "15.x",
-    "@angular-eslint/schematics": "15.x",
-    "@angular-eslint/template-parser": "15.x",
-    "@angular/cli": "15.x",
-    "@angular/compiler-cli": "15.x",
-    "@angular/language-service": "15.x",
+    "@angular-eslint/eslint-plugin": "18",
+    "@angular-eslint/eslint-plugin-template": "18",
+    "@angular-eslint/schematics": "18",
+    "@angular-eslint/template-parser": "18",
+    "@angular/cli": "20.3.25",
+    "@angular/compiler-cli": "20.3.19",
+    "@angular/language-service": "20.3.19",
     "@types/jasmine": "3.6.x",
     "@types/jasminewd2": "2.0.x",
     "@types/node": "12.11.x",
@@ -77,7 +77,7 @@
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-standard-scss": "^3.0.0",
     "ts-node": "8.3.x",
-    "typescript": "4.x"
+    "typescript": "5.8.3"
   },
   "packageManager": "yarn@3.2.0"
 }

frontend/src/app/app.component.ts

@@ -11,9 +11,10 @@ import { ServerInfoComponent } from "./shared/server-info/server-info.component"
 import { LogService } from "./services/logging/log.service";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: false
 })
 export class AppComponent {
 

frontend/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
 import { ServicesModule } from './services/services.module';
 import { MatMenuModule } from '@angular/material/menu';
 import { CompetitionModule } from './competition/competition.module';
@@ -40,45 +40,39 @@ export function initializeApp(appConfig: AppConfig) {
   return () => appConfig.load();
 }
 
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    /* Imported modules. */
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatButtonModule,
-    MatSnackBarModule,
-    MatMenuModule,
-    MatTooltipModule,
-    HttpClientModule,
-    DragDropModule,
-    MatTableModule,
-
-    /* Our own modules. */
-    SharedModule,
-    ServicesModule,
-    UserModule,
-    CompetitionModule,
-    CompetitionBuilderModule,
-    ViewerModule,
-    RunModule,
-    CollectionModule,
-    JudgementModule,
-    TemplateModule,
-    EvaluationModule,
-    ErrorModule,
-    LoggingModule,
-    ErrorHandlingModule,
-  ],
-  providers: [
-    AppConfig,
-    { provide: APP_INITIALIZER, useFactory: initializeApp, deps: [AppConfig], multi: true },
-    AccessRoleService,
-    {provide: HTTP_INTERCEPTORS, useClass: DresBackendUnauthorisedHandlerService, deps: [AppConfig], multi:true}
-  ],
-  bootstrap: [AppComponent],
-})
+@NgModule({ declarations: [AppComponent],
+    bootstrap: [AppComponent], imports: [
+        /* Imported modules. */
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatButtonModule,
+        MatSnackBarModule,
+        MatMenuModule,
+        MatTooltipModule,
+        DragDropModule,
+        MatTableModule,
+        /* Our own modules. */
+        SharedModule,
+        ServicesModule,
+        UserModule,
+        CompetitionModule,
+        CompetitionBuilderModule,
+        ViewerModule,
+        RunModule,
+        CollectionModule,
+        JudgementModule,
+        TemplateModule,
+        EvaluationModule,
+        ErrorModule,
+        LoggingModule,
+        ErrorHandlingModule], providers: [
+        AppConfig,
+        { provide: APP_INITIALIZER, useFactory: initializeApp, deps: [AppConfig], multi: true },
+        AccessRoleService,
+        { provide: HTTP_INTERCEPTORS, useClass: DresBackendUnauthorisedHandlerService, deps: [AppConfig], multi: true },
+        provideHttpClient(withInterceptorsFromDi())
+    ] })
 export class AppModule {}

frontend/src/app/collection/collection-builder/collection-builder-dialog/collection-builder-dialog.component.ts

@@ -4,9 +4,10 @@ import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms
 import {ApiMediaCollection} from '../../../../../openapi';
 
 @Component({
-  selector: 'app-collection-builder-dialog',
-  templateUrl: './collection-builder-dialog.component.html',
-  styleUrls: ['./collection-builder-dialog.component.scss'],
+    selector: 'app-collection-builder-dialog',
+    templateUrl: './collection-builder-dialog.component.html',
+    styleUrls: ['./collection-builder-dialog.component.scss'],
+    standalone: false
 })
 export class CollectionBuilderDialogComponent implements OnInit {
   form: UntypedFormGroup;

frontend/src/app/collection/collection-builder/media-item-builder-dialog/media-item-builder-dialog.component.ts

@@ -9,9 +9,10 @@ export interface MediaItemBuilderData {
 }
 
 @Component({
-  selector: 'app-media-item-builder-dialog',
-  templateUrl: './media-item-builder-dialog.component.html',
-  styleUrls: ['./media-item-builder-dialog.component.scss'],
+    selector: 'app-media-item-builder-dialog',
+    templateUrl: './media-item-builder-dialog.component.html',
+    styleUrls: ['./media-item-builder-dialog.component.scss'],
+    standalone: false
 })
 export class MediaItemBuilderDialogComponent implements OnInit {
   form: UntypedFormGroup;

frontend/src/app/collection/collection-list/collection-list.component.ts

@@ -10,9 +10,10 @@ import {ApiMediaCollection, CollectionService} from '../../../../openapi';
  * @deprecated
  */
 @Component({
-  selector: 'app-collection-list',
-  templateUrl: './collection-list.component.html',
-  styleUrls: ['./collection-list.component.scss'],
+    selector: 'app-collection-list',
+    templateUrl: './collection-list.component.html',
+    styleUrls: ['./collection-list.component.scss'],
+    standalone: false
 })
 export class CollectionListComponent implements AfterViewInit {
   displayedColumns = ['actions', 'id', 'name', 'description', 'basePath'];

frontend/src/app/collection/collection-viewer/collection-viewer.component.ts

@@ -15,9 +15,10 @@ import { MatSort } from '@angular/material/sort';
 import {ApiMediaItem, ApiPopulatedMediaCollection, CollectionService} from '../../../../openapi';
 
 @Component({
-  selector: 'app-collection-viewer',
-  templateUrl: './collection-viewer.component.html',
-  styleUrls: ['./collection-viewer.component.scss'],
+    selector: 'app-collection-viewer',
+    templateUrl: './collection-viewer.component.html',
+    styleUrls: ['./collection-viewer.component.scss'],
+    standalone: false
 })
 export class CollectionViewerComponent implements AfterViewInit, OnDestroy {
 

frontend/src/app/competition/competition-builder/competition-builder-task-dialog/advanced-builder-dialog/advanced-builder-dialog.component.ts

@@ -13,9 +13,10 @@ export class AdvancedBuilderDialogData {
  * @deprecated This has to be replaced by a proper, more sophisticated component.
  */
 @Component({
-  selector: 'app-advanced-builder-dialog',
-  templateUrl: './advanced-builder-dialog.component.html',
-  styleUrls: ['./advanced-builder-dialog.component.scss'],
+    selector: 'app-advanced-builder-dialog',
+    templateUrl: './advanced-builder-dialog.component.html',
+    styleUrls: ['./advanced-builder-dialog.component.scss'],
+    standalone: false
 })
 export class AdvancedBuilderDialogComponent implements OnInit {
   public textualInput = '';

frontend/src/app/competition/competition-builder/competition-builder-task-dialog/competition-builder-task-dialog.component.ts

@@ -38,9 +38,10 @@ export interface CompetitionBuilderTaskDialogData {
  * @deprecated Got replaced by task-template-editor.component.ts
  */
 @Component({
-  selector: 'app-competition-builder-task-dialog',
-  templateUrl: './competition-builder-task-dialog.component.html',
-  styleUrls: ['./competition-builder-task-dialog.component.scss'],
+    selector: 'app-competition-builder-task-dialog',
+    templateUrl: './competition-builder-task-dialog.component.html',
+    styleUrls: ['./competition-builder-task-dialog.component.scss'],
+    standalone: false
 })
 export class CompetitionBuilderTaskDialogComponent {
   form: UntypedFormGroup;

frontend/src/app/competition/competition-builder/competition-builder-task-dialog/video-player-segment-builder-dialog/video-player-segment-builder-dialog.component.ts

@@ -10,9 +10,10 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
  * @deprecated This component should not be used anymore, as there is no need for a dialog anymore
  */
 @Component({
-  selector: 'app-video-player-segment-builder-dialog',
-  templateUrl: './video-player-segment-builder-dialog.component.html',
-  styleUrls: ['./video-player-segment-builder-dialog.component.scss'],
+    selector: 'app-video-player-segment-builder-dialog',
+    templateUrl: './video-player-segment-builder-dialog.component.html',
+    styleUrls: ['./video-player-segment-builder-dialog.component.scss'],
+    standalone: false
 })
 export class VideoPlayerSegmentBuilderDialogComponent implements OnInit {
   @ViewChild(VideoPlayerSegmentBuilderComponent) videoPlayer: VideoPlayerSegmentBuilderComponent;

frontend/src/app/competition/competition-builder/competition-builder-task-dialog/video-player-segment-builder/video-player-segment-builder.component.ts

@@ -17,9 +17,10 @@ export interface VideoPlayerSegmentBuilderData {
 
 
 @Component({
-  selector: 'app-video-player-segment-builder',
-  templateUrl: './video-player-segment-builder.component.html',
-  styleUrls: ['./video-player-segment-builder.component.scss'],
+    selector: 'app-video-player-segment-builder',
+    templateUrl: './video-player-segment-builder.component.html',
+    styleUrls: ['./video-player-segment-builder.component.scss'],
+    standalone: false
 })
 export class VideoPlayerSegmentBuilderComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() data: VideoPlayerSegmentBuilderData;

frontend/src/app/competition/competition-builder/competition-builder-task-group-dialog/competition-builder-task-group.component.ts

@@ -9,8 +9,9 @@ export interface CompetitionBuilderTaskGroupDialogData {
 }
 
 @Component({
-  selector: 'app-competition-builder-task-group-dialog',
-  templateUrl: './competition-builder-task-group.component.html',
+    selector: 'app-competition-builder-task-group-dialog',
+    templateUrl: './competition-builder-task-group.component.html',
+    standalone: false
 })
 export class CompetitionBuilderTaskGroupDialogComponent {
   /** List of task types currently supported by the UI. */