Development: Upgrade to Angular 18 (#8687)

angular.json

@@ -66,7 +66,8 @@
             "index": "src/main/webapp/index.html",
             "browser": "src/main/webapp/app/app.main.ts",
             "polyfills": [
-                "src/main/webapp/app/polyfills.ts"
+                "src/main/webapp/app/polyfills.ts",
+                "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.json",
             "inlineStyleLanguage": "scss",

docs/dev/setup.rst

@@ -32,10 +32,10 @@ following dependencies/tools on your machine:
 2. `MySQL Database Server 8 <https://dev.mysql.com/downloads/mysql>`__, or `PostgreSQL <https://www.postgresql.org/>`_:
    Artemis uses Hibernate to store entities in an SQL database and Liquibase to
    automatically apply schema transformations when updating Artemis.
-3. `Node.js <https://nodejs.org/en/download>`__: We use Node LTS (>=20.10.0 < 21) to compile
+3. `Node.js <https://nodejs.org/en/download>`__: We use Node LTS (>=20.14.0 < 21) to compile
    and run the client Angular application. Depending on your system, you
    can install Node either from source or as a pre-packaged bundle.
-4. `Npm <https://nodejs.org/en/download>`__: We use Npm (>=10.2.3) to
+4. `Npm <https://nodejs.org/en/download>`__: We use Npm (>=10.7.0) to
    manage client side dependencies. Npm is typically bundled with Node.js,
    but can also be installed separately.
 5. ( `Graphviz <https://www.graphviz.org/download/>`__: We use Graphviz to generate graphs within exercise task

gradle.properties

@@ -2,8 +2,8 @@ rootProject.name=Artemis
 profile=dev
 
 # Build properties
-node_version=20.10.0
-npm_version=10.2.3
+node_version=20.14.0
+npm_version=10.7.0
 
 # Dependency versions
 jhipster_dependencies_version=8.5.0

package.json

@@ -13,36 +13,36 @@
         "node_modules"
     ],
     "dependencies": {
-        "@angular/animations": "17.3.9",
-        "@angular/cdk": "17.3.9",
-        "@angular/common": "17.3.9",
-        "@angular/compiler": "17.3.9",
-        "@angular/core": "17.3.9",
-        "@angular/forms": "17.3.9",
-        "@angular/localize": "17.3.9",
-        "@angular/material": "17.3.9",
-        "@angular/platform-browser-dynamic": "17.3.9",
-        "@angular/platform-browser": "17.3.9",
-        "@angular/router": "17.3.9",
-        "@angular/service-worker": "17.3.9",
+        "@angular/animations": "18.0.3",
+        "@angular/cdk": "18.0.4",
+        "@angular/common": "18.0.3",
+        "@angular/compiler": "18.0.3",
+        "@angular/core": "18.0.3",
+        "@angular/forms": "18.0.3",
+        "@angular/localize": "18.0.3",
+        "@angular/material": "18.0.4",
+        "@angular/platform-browser-dynamic": "18.0.3",
+        "@angular/platform-browser": "18.0.3",
+        "@angular/router": "18.0.3",
+        "@angular/service-worker": "18.0.3",
         "@ctrl/ngx-emoji-mart": "9.2.0",
         "@danielmoncada/angular-datetime-picker": "17.0.0",
-        "@fingerprintjs/fingerprintjs": "4.3.0",
+        "@fingerprintjs/fingerprintjs": "4.4.1",
         "@flaviosantoro92/ngx-datatable": "1.0.2",
-        "@fortawesome/angular-fontawesome": "0.14.1",
+        "@fortawesome/angular-fontawesome": "0.15.0",
         "@fortawesome/fontawesome-svg-core": "6.5.2",
         "@fortawesome/free-regular-svg-icons": "6.5.2",
         "@fortawesome/free-solid-svg-icons": "6.5.2",
         "@ls1intum/apollon": "3.3.14",
-        "@ng-bootstrap/ng-bootstrap": "16.0.0",
+        "@ng-bootstrap/ng-bootstrap": "17.0.0",
         "@ngx-translate/core": "15.0.0",
         "@ngx-translate/http-loader": "8.0.0",
         "@sentry/angular-ivy": "7.114.0",
         "@sentry/tracing": "7.114.0",
         "@swimlane/ngx-charts": "20.5.0",
         "@swimlane/ngx-graph": "8.3.0",
         "@vscode/codicons": "0.0.36",
-        "ace-builds": "1.33.2",
+        "ace-builds": "1.35.0",
         "bootstrap": "5.3.3",
         "brace": "0.11.1",
         "compare-versions": "6.1.0",
@@ -51,7 +51,7 @@
         "dayjs": "1.11.11",
         "diff-match-patch-typescript": "1.0.8",
         "fast-json-patch": "3.1.1",
-        "dompurify": "3.1.3",
+        "dompurify": "3.1.5",
         "export-to-csv": "1.3.0",
         "franc-min": "6.2.0",
         "interactjs": "1.10.27",
@@ -60,11 +60,11 @@
         "jszip": "3.10.1",
         "lodash-es": "4.17.21",
         "mobile-drag-drop": "3.0.0-rc.0",
-        "monaco-editor": "0.48.0",
-        "ngx-infinite-scroll": "17.0.0",
-        "ngx-webstorage": "13.0.1",
+        "monaco-editor": "0.50.0",
+        "ngx-infinite-scroll": "18.0.0",
+        "ngx-webstorage": "18.0.0",
         "papaparse": "5.4.1",
-        "posthog-js": "1.131.4",
+        "posthog-js": "1.139.5",
         "rxjs": "7.8.1",
         "showdown": "2.1.0",
         "showdown-highlight": "3.1.0",
@@ -74,70 +74,85 @@
         "sockjs-client": "1.6.1",
         "split.js": "1.6.5",
         "ts-cacheable": "1.0.10",
-        "tslib": "2.6.2",
-        "uuid": "9.0.1",
+        "tslib": "2.6.3",
+        "uuid": "10.0.0",
         "webstomp-client": "1.2.6",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
-        "zone.js": "0.14.5"
+        "zone.js": "0.14.7"
     },
     "overrides": {
+        "@danielmoncada/angular-datetime-picker": {
+            "@angular/cdk": "^18.0.0",
+            "@angular/common": "^18.0.0",
+            "@angular/core": "^18.0.0"
+        },
+        "@sentry/angular-ivy": {
+            "@angular/cdk": "^18.0.0",
+            "@angular/common": "^18.0.0",
+            "@angular/core": "^18.0.0",
+            "@angular/localize": "^18.0.0",
+            "@angular/forms": "^18.0.0",
+            "@angular/router": "^18.0.0"
+        },
         "@swimlane/ngx-graph": {
-            "@angular/animations": "^17.0.0",
-            "@angular/cdk": "^17.0.0",
-            "@angular/common": "^17.0.0",
-            "@angular/core": "^17.0.0",
+            "@angular/animations": "^18.0.0",
+            "@angular/cdk": "^18.0.0",
+            "@angular/common": "^18.0.0",
+            "@angular/core": "^18.0.0",
             "d3-brush": "^3.0.0",
             "d3-color": "^3.1.0",
             "d3-interpolate": "^3.0.1",
             "d3-selection": "^3.0.0",
             "d3-transition": "^3.0.0"
         },
-        "axios": "1.6.8",
+        "axios": "1.7.2",
         "braces": "3.0.3",
         "critters": "0.0.22",
         "debug": "4.3.4",
+        "jsdom": "24.0.0",
         "katex": "0.16.10",
         "postcss": "8.4.38",
-        "semver": "7.6.0",
+        "semver": "7.6.2",
         "showdown-katex": {
             "showdown": "2.1.0"
         },
-        "tough-cookie": "4.1.3",
-        "undici": "6.12.0",
-        "vite": "5.1.7",
+        "tough-cookie": "4.1.4",
+        "undici": "6.18.1",
+        "vite": "5.2.12",
         "webpack-dev-middleware": "7.2.1",
         "word-wrap": "1.2.5",
-        "ws": "8.17.1"
+        "ws": "8.17.1",
+        "yargs-parser": "21.1.1"
     },
     "devDependencies": {
-        "@angular-builders/jest": "17.0.3",
-        "@angular-devkit/build-angular": "17.3.7",
-        "@angular-eslint/builder": "17.4.1",
-        "@angular-eslint/eslint-plugin": "17.4.1",
-        "@angular-eslint/eslint-plugin-template": "17.4.1",
-        "@angular-eslint/schematics": "17.4.1",
-        "@angular-eslint/template-parser": "17.4.1",
-        "@angular/cli": "17.3.7",
-        "@angular/compiler-cli": "17.3.9",
-        "@angular/language-service": "17.3.9",
+        "@angular-builders/jest": "18.0.0",
+        "@angular-devkit/build-angular": "18.0.5",
+        "@angular-eslint/builder": "18.0.1",
+        "@angular-eslint/eslint-plugin": "18.0.1",
+        "@angular-eslint/eslint-plugin-template": "18.0.1",
+        "@angular-eslint/schematics": "18.0.1",
+        "@angular-eslint/template-parser": "18.0.1",
+        "@angular/cli": "18.0.5",
+        "@angular/compiler-cli": "18.0.3",
+        "@angular/language-service": "18.0.3",
         "@sentry/types": "7.114.0",
         "@types/crypto-js": "4.2.2",
         "@types/d3-shape": "3.1.6",
         "@types/dompurify": "3.0.5",
         "@types/jest": "29.5.12",
         "@types/lodash-es": "4.17.12",
-        "@types/node": "20.12.12",
+        "@types/node": "20.14.6",
         "@types/papaparse": "5.3.14",
         "@types/showdown": "2.0.6",
         "@types/smoothscroll-polyfill": "0.3.4",
         "@types/sockjs-client": "1.5.4",
         "@types/uuid": "9.0.8",
-        "@typescript-eslint/eslint-plugin": "7.9.0",
-        "@typescript-eslint/parser": "7.9.0",
+        "@typescript-eslint/eslint-plugin": "7.13.1",
+        "@typescript-eslint/parser": "7.13.1",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
-        "eslint-plugin-deprecation": "2.0.0",
-        "eslint-plugin-jest": "28.5.0",
+        "eslint-plugin-deprecation": "3.0.0",
+        "eslint-plugin-jest": "28.6.0",
         "eslint-plugin-jest-extended": "2.4.0",
         "eslint-plugin-prettier": "5.1.3",
         "folder-hash": "4.0.4",
@@ -148,17 +163,17 @@
         "jest-extended": "4.0.2",
         "jest-fail-on-console": "3.3.0",
         "jest-junit": "16.0.0",
-        "jest-preset-angular": "14.0.4",
-        "lint-staged": "15.2.2",
-        "ng-mocks": "14.12.2",
-        "prettier": "3.2.5",
-        "sass": "1.77.1",
-        "ts-jest": "29.1.2",
+        "jest-preset-angular": "14.1.1",
+        "lint-staged": "15.2.7",
+        "ng-mocks": "14.13.0",
+        "prettier": "3.3.2",
+        "sass": "1.77.6",
+        "ts-jest": "29.1.5",
         "typescript": "5.4.5",
         "weak-napi": "2.0.2"
     },
     "engines": {
-        "node": ">=20.10.0"
+        "node": ">=20.14.0"
     },
     "scripts": {
         "postinstall": "husky",

src/main/webapp/app/assessment/assessment-header/assessment-header.component.html

@@ -107,7 +107,7 @@ <h3 class="top-container flex-wrap flex-lg-nowrap">
                         [ngbTooltip]="('artemisApp.assessment.button.control' | artemisTranslate) + ' + S'"
                     >
                         @if (saveBusy) {
-                            <fa-icon [icon]="faSpinner" [spin]="true" />
+                            <fa-icon [icon]="faSpinner" animation="spin" />
                         }
                         <fa-icon [icon]="faSave" />
                         <span jhiTranslate="entity.action.save"></span>
@@ -120,7 +120,7 @@ <h3 class="top-container flex-wrap flex-lg-nowrap">
                         [ngbTooltip]="('artemisApp.assessment.button.control' | artemisTranslate) + ' + Enter'"
                     >
                         @if (submitBusy) {
-                            <fa-icon [icon]="faSpinner" [spin]="true" />
+                            <fa-icon [icon]="faSpinner" animation="spin" />
                         }
                         <span jhiTranslate="entity.action.submit"></span>
                     </button>
@@ -131,7 +131,7 @@ <h3 class="top-container flex-wrap flex-lg-nowrap">
                             [disabled]="!(exercise?.isAtLeastInstructor || isAssessor) || saveBusy || submitBusy || cancelBusy"
                         >
                             @if (cancelBusy) {
-                                <fa-icon [icon]="faSpinner" [spin]="true" />
+                                <fa-icon [icon]="faSpinner" animation="spin" />
                             }
                             <span jhiTranslate="entity.action.cancel"></span>
                         </button>
@@ -145,15 +145,15 @@ <h3 class="top-container flex-wrap flex-lg-nowrap">
                         [ngbTooltip]="('artemisApp.assessment.button.control' | artemisTranslate) + ' + Enter'"
                     >
                         @if (submitBusy) {
-                            <fa-icon [icon]="faSpinner" [spin]="true" />
+                            <fa-icon [icon]="faSpinner" animation="spin" />
                         }
                         <span jhiTranslate="artemisApp.assessment.button.overrideAssessment"></span>
                     </button>
                 }
                 @if (result?.completionDate && exercise?.isAtLeastInstructor && (exercise!.type === ExerciseType.MODELING || exercise!.type === ExerciseType.TEXT)) {
                     <button class="btn m-1 btn-primary" id="useAsExampleSubmission" (click)="onUseAsExampleSolutionClicked()">
                         @if (submitBusy) {
-                            <fa-icon [icon]="faSpinner" [spin]="true" />
+                            <fa-icon [icon]="faSpinner" animation="spin" />
                         }
                         <span jhiTranslate="artemisApp.assessment.button.useAsExampleSubmission"></span>
                     </button>
@@ -170,7 +170,7 @@ <h3 class="top-container flex-wrap flex-lg-nowrap">
                         [ngbTooltip]="nextSubmissionShortcut"
                     >
                         @if (nextSubmissionBusy) {
-                            <fa-icon [icon]="faSpinner" [spin]="true" />
+                            <fa-icon [icon]="faSpinner" animation="spin" />
                         }
                         <span jhiTranslate="artemisApp.assessment.button.nextSubmission"></span>
                     </button>

src/main/webapp/app/assessment/assessment-locks/assessment-locks.component.html

@@ -54,7 +54,7 @@ <h2>
                                                 submission.participation!.id!,
                                                 'submissions',
                                                 submission.id!,
-                                                'assessment'
+                                                'assessment',
                                             ]"
                                             class="btn btn-outline-secondary btn-sm mb-1"
                                         >
@@ -70,7 +70,7 @@ <h2>
                                                 submission.participation!.exercise!.id!,
                                                 'submissions',
                                                 submission.id,
-                                                'assessment'
+                                                'assessment',
                                             ]"
                                             class="btn btn-outline-secondary btn-sm mb-1"
                                         >

src/main/webapp/app/assessment/assessment-locks/assessment-locks.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Location } from '@angular/common';
 import { FileUploadAssessmentService } from 'app/exercises/file-upload/assess/file-upload-assessment.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Submission, SubmissionExerciseType } from 'app/entities/submission.model';
@@ -21,8 +20,6 @@ import { combineLatest } from 'rxjs';
     templateUrl: './assessment-locks.component.html',
 })
 export class AssessmentLocksComponent implements OnInit {
-    PROGRAMMING_EXERCISE = ExerciseType.PROGRAMMING;
-
     readonly ExerciseType = ExerciseType;
 
     course: Course;
@@ -51,7 +48,6 @@ export class AssessmentLocksComponent implements OnInit {
         private fileUploadAssessmentService: FileUploadAssessmentService,
         private programmingAssessmentService: ProgrammingAssessmentManualResultService,
         translateService: TranslateService,
-        private location: Location,
         private courseService: CourseManagementService,
         private examManagementService: ExamManagementService,
     ) {

src/main/webapp/app/core/core.module.ts

@@ -1,12 +1,12 @@
 import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule } from '@angular/core';
 import { DatePipe, registerLocaleData } from '@angular/common';
-import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { Title } from '@angular/platform-browser';
 import { AuthExpiredInterceptor } from 'app/core/interceptor/auth-expired.interceptor';
 import { ErrorHandlerInterceptor } from 'app/core/interceptor/errorhandler.interceptor';
 import { NotificationInterceptor } from 'app/core/interceptor/notification.interceptor';
 import { NgbDateAdapter, NgbDatepickerConfig, NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
-import { NgxWebstorageModule, SessionStorageService } from 'ngx-webstorage';
+import { SessionStorageService, provideNgxWebstorage, withLocalStorage, withNgxWebstorageConfig, withSessionStorage } from 'ngx-webstorage';
 import locale from '@angular/common/locales/en';
 import { MissingTranslationHandler, TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { SentryErrorHandler } from 'app/core/sentry/sentry.error-handler';
@@ -23,8 +23,6 @@ import { Router } from '@angular/router';
 
 @NgModule({
     imports: [
-        HttpClientModule,
-        NgxWebstorageModule.forRoot({ prefix: 'jhi', separator: '-' }),
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,
@@ -38,6 +36,8 @@ import { Router } from '@angular/router';
         }),
     ],
     providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideNgxWebstorage(withNgxWebstorageConfig({ prefix: 'jhi', separator: '-' }), withLocalStorage(), withSessionStorage()),
         Title,
         {
             provide: LOCALE_ID,

src/main/webapp/app/core/legal/data-export/confirmation/data-export-confirmation-dialog.component.html

@@ -49,7 +49,7 @@ <h4 class="modal-title">
             [disabled]="dataExportConfirmationForm.invalid || submitDisabled"
         >
             @if (submitDisabled) {
-                <span><fa-icon [icon]="faSpinner" [spin]="true" />&nbsp;</span>
+                <span><fa-icon [icon]="faSpinner" animation="spin" />&nbsp;</span>
             }
             <fa-icon [icon]="faCheck" />&nbsp;
             <span [jhiTranslate]="'artemisApp.dataExport.request'"> Request</span>

src/main/webapp/app/course/course-scores/course-scores.component.html

@@ -17,7 +17,7 @@ <h4>
         </div>
         @if (!exportReady) {
             <span style="color: grey"
-                ><fa-icon [icon]="faSpinner" [spin]="true" />&nbsp;<span jhitranslate="artemisApp.instructorDashboard.loadingStudents"
+                ><fa-icon [icon]="faSpinner" animation="spin" />&nbsp;<span jhitranslate="artemisApp.instructorDashboard.loadingStudents"
                     >Loading the results of all students...</span
                 ></span
             >