Development: Update to Angular 20 (#11168)

Author: marlonnienaber

jest.config.js

@@ -96,10 +96,10 @@ module.exports = {
     coverageThreshold: {
         global: {
             // TODO: in the future, the following values should increase to at least 90%
-            statements: 89.13,
-            branches: 75.16,
-            functions: 82.94,
-            lines: 89.21,
+            statements: 89.61,
+            branches: 75.83,
+            functions: 83.50,
+            lines: 89.68,
         },
     },
     // 'json-summary' reporter is used by supporting_scripts/code-coverage/module-coverage-client/check-client-module-coverage.mjs

package-lock.json

@@ -13,38 +13,38 @@
         "node_modules"
     ],
     "dependencies": {
-        "@angular/animations": "19.2.14",
-        "@angular/cdk": "19.2.18",
-        "@angular/common": "19.2.14",
-        "@angular/compiler": "19.2.14",
-        "@angular/core": "19.2.14",
-        "@angular/forms": "19.2.14",
-        "@angular/localize": "19.2.14",
-        "@angular/material": "19.2.18",
-        "@angular/platform-browser": "19.2.14",
-        "@angular/platform-browser-dynamic": "19.2.14",
-        "@angular/router": "19.2.14",
-        "@angular/service-worker": "19.2.14",
+        "@angular/animations": "20.1.2",
+        "@angular/cdk": "20.1.2",
+        "@angular/common": "20.1.2",
+        "@angular/compiler": "20.1.2",
+        "@angular/core": "20.1.2",
+        "@angular/forms": "20.1.2",
+        "@angular/localize": "20.1.2",
+        "@angular/material": "20.1.2",
+        "@angular/platform-browser": "20.1.2",
+        "@angular/platform-browser-dynamic": "20.1.2",
+        "@angular/router": "20.1.2",
+        "@angular/service-worker": "20.1.2",
         "@ctrl/ngx-emoji-mart": "9.2.0",
-        "@danielmoncada/angular-datetime-picker": "19.1.2",
+        "@danielmoncada/angular-datetime-picker": "20.0.0",
         "@fingerprintjs/fingerprintjs": "4.6.2",
-        "@fortawesome/angular-fontawesome": "1.0.0",
+        "@fortawesome/angular-fontawesome": "2.0.1",
         "@fortawesome/fontawesome-svg-core": "6.7.2",
         "@fortawesome/free-regular-svg-icons": "6.7.2",
         "@fortawesome/free-solid-svg-icons": "6.7.2",
         "@ls1intum/apollon": "3.4.0",
-        "@ng-bootstrap/ng-bootstrap": "18.0.0",
+        "@ng-bootstrap/ng-bootstrap": "19.0.1",
         "@ngx-translate/core": "16.0.4",
         "@ngx-translate/http-loader": "16.0.1",
-        "@sentry/angular": "9.32.0",
-        "@siemens/ngx-datatable": "22.4.1",
-        "@swimlane/ngx-charts": "22.0.0",
-        "@swimlane/ngx-graph": "10.0.0",
-        "@vscode/codicons": "0.0.36",
-        "@vscode/markdown-it-katex": "1.1.1",
+        "@sentry/angular": "9.40.0",
+        "@siemens/ngx-datatable": "24.1.0",
+        "@swimlane/ngx-charts": "23.0.0-alpha.0",
+        "@swimlane/ngx-graph": "11.0.0-alpha.0",
+        "@vscode/codicons": "0.0.38",
+        "@vscode/markdown-it-katex": "1.1.2",
         "bootstrap": "5.3.7",
         "compare-versions": "6.1.1",
-        "core-js": "3.43.0",
+        "core-js": "3.44.0",
         "crypto-js": "4.2.0",
         "dayjs": "1.11.13",
         "diff-match-patch-typescript": "1.1.0",
@@ -65,13 +65,13 @@
         "markdown-it-highlightjs": "4.2.0",
         "mobile-drag-drop": "3.0.0-rc.0",
         "monaco-editor": "0.52.2",
-        "ngx-infinite-scroll": "19.0.0",
+        "ngx-infinite-scroll": "20.0.0",
         "ngx-webstorage": "19.0.1",
         "pako": "2.1.0",
         "papaparse": "5.5.3",
         "pdf-lib": "1.17.1",
-        "pdfjs-dist": "5.3.31",
-        "primeng": "19.1.3",
+        "pdfjs-dist": "5.3.93",
+        "primeng": "20.0.0",
         "rxjs": "7.8.2",
         "simple-statistics": "7.8.8",
         "smoothscroll-polyfill": "0.4.4",
@@ -90,86 +90,86 @@
         "cookie": "1.0.2",
         "critters": "0.0.25",
         "debug": "4.4.1",
-        "esbuild": "0.25.5",
+        "esbuild": "0.25.6",
         "eslint-plugin-deprecation": {
-            "eslint": "^9.29.0"
+            "eslint": "^9.31.0"
         },
         "express": "5.1.0",
         "jsdom": "26.1.0",
         "katex": "0.16.22",
-        "ng-mocks": {
-            "@angular/common": "^19.2.0",
-            "@angular/core": "^19.2.0",
-            "@angular/forms": "^19.2.0",
-            "@angular/platform-browser": "^19.2.0"
+        "ngx-webstorage": {
+            "@angular/common": "^20.0.0",
+            "@angular/core": "^20.0.0",
+            "@angular/platform-browser": "^20.0.0"
         },
         "postcss": "8.5.6",
         "rimraf": "6.0.1",
         "semver": "7.7.2",
         "tough-cookie": "5.1.2",
-        "vite": "6.3.5",
-        "webpack": "5.99.9",
+        "vite": "7.0.5",
+        "webpack": "5.100.2",
         "webpack-dev-middleware": "7.4.2",
         "webpack-dev-server": "5.2.2",
         "word-wrap": "1.2.5",
-        "ws": "8.18.2",
+        "ws": "8.18.3",
         "yargs-parser": "22.0.0"
     },
     "devDependencies": {
-        "@analogjs/vite-plugin-angular": "1.19.0",
-        "@angular-builders/jest": "19.0.1",
-        "@angular-eslint/builder": "19.8.0",
-        "@angular-eslint/eslint-plugin": "19.8.0",
-        "@angular-eslint/eslint-plugin-template": "19.8.0",
-        "@angular-eslint/schematics": "19.8.0",
-        "@angular-eslint/template-parser": "19.8.0",
-        "@angular/build": "19.2.15",
-        "@angular/cli": "19.2.15",
-        "@angular/compiler-cli": "19.2.14",
-        "@angular/language-service": "19.2.14",
-        "@sentry/types": "9.32.0",
+        "@analogjs/vite-plugin-angular": "1.19.1",
+        "@angular-builders/jest": "20.0.0",
+        "@angular-devkit/build-angular": "20.1.1",
+        "@angular-eslint/builder": "20.1.1",
+        "@angular-eslint/eslint-plugin": "20.1.1",
+        "@angular-eslint/eslint-plugin-template": "20.1.1",
+        "@angular-eslint/schematics": "20.1.1",
+        "@angular-eslint/template-parser": "20.1.1",
+        "@angular/build": "20.1.1",
+        "@angular/cli": "20.1.1",
+        "@angular/compiler-cli": "20.1.2",
+        "@angular/language-service": "20.1.2",
+        "@sentry/types": "9.40.0",
         "@testing-library/angular": "17.4.0",
         "@types/crypto-js": "4.2.2",
         "@types/d3-shape": "3.1.7",
         "@types/emoji-js": "3.5.2",
         "@types/jest": "29.5.14",
         "@types/lodash-es": "4.17.12",
         "@types/markdown-it": "14.1.2",
-        "@types/node": "22.15.31",
+        "@types/node": "22.15.33",
         "@types/pako": "2.0.3",
         "@types/papaparse": "5.3.16",
         "@types/smoothscroll-polyfill": "0.3.4",
         "@types/turndown": "5.0.5",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.35.0",
-        "@typescript-eslint/parser": "8.35.0",
-        "@typescript-eslint/utils": "8.35.0",
-        "angular-eslint": "19.8.0",
+        "@typescript-eslint/eslint-plugin": "8.37.0",
+        "@typescript-eslint/parser": "8.37.0",
+        "@typescript-eslint/utils": "8.37.0",
+        "angular-eslint": "20.1.1",
         "cross-env": "7.0.3",
-        "eslint": "9.29.0",
+        "eslint": "9.31.0",
         "eslint-config-prettier": "10.1.5",
         "eslint-plugin-deprecation": "3.0.0",
-        "eslint-plugin-jest": "28.13.5",
+        "eslint-plugin-jest": "29.0.1",
         "eslint-plugin-jest-extended": "3.0.0",
         "eslint-plugin-prettier": "5.5.1",
         "folder-hash": "4.1.1",
         "husky": "9.1.7",
         "jest": "29.7.0",
         "jest-canvas-mock": "2.5.2",
         "jest-date-mock": "1.0.10",
-        "jest-extended": "5.0.3",
+        "jest-extended": "6.0.0",
         "jest-fail-on-console": "3.3.1",
         "jest-junit": "16.0.0",
         "jest-preset-angular": "14.6.0",
         "lint-staged": "16.1.2",
         "ng-mocks": "14.13.5",
         "patch-package": "8.0.0",
-        "prettier": "3.6.1",
+        "prettier": "3.6.2",
         "rimraf": "6.0.1",
         "sass": "1.89.2",
         "ts-jest": "29.4.0",
         "typescript": "5.8.3",
-        "typescript-eslint": "8.35.0",
+        "typescript-eslint": "8.37.0",
         "vite-tsconfig-paths": "5.1.4",
         "vitest": "3.2.4",
         "weak-napi": "2.0.2"

package.json

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@swimlane/ngx-graph/fesm2022/swimlane-ngx-graph.mjs b/node_modules/@swimlane/ngx-graph/fesm2022/swimlane-ngx-graph.mjs
+index 84d6b7f..a6584da 100644
+--- a/node_modules/@swimlane/ngx-graph/fesm2022/swimlane-ngx-graph.mjs
++++ b/node_modules/@swimlane/ngx-graph/fesm2022/swimlane-ngx-graph.mjs
+@@ -1482,7 +1482,7 @@ class GraphComponent {
+         if (layoutSettings) {
+             this.setLayoutSettings(this.layoutSettings);
+         }
+-        if (this.layout && this.nodes.length && this.links.length) {
++        if (this.layout && this.nodes && this.links) {
+             this.update();
+         }
+     }

patches/@swimlane+ngx-graph+10.0.0.patch

@@ -16,14 +16,15 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { AssessmentNoteComponent } from 'app/assessment/manage/assessment-note/assessment-note.component';
 import { TranslateService } from '@ngx-translate/core';
 import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 describe('AssessmentLayoutComponent', () => {
     let component: AssessmentLayoutComponent;
     let fixture: ComponentFixture<AssessmentLayoutComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [MockModule(NgbTooltipModule), MockComponent(ComplaintsForTutorComponent)],
+            imports: [MockModule(NgbTooltipModule), MockComponent(ComplaintsForTutorComponent), FaIconComponent],
             declarations: [
                 AssessmentLayoutComponent,
                 AssessmentHeaderComponent,

patches/@swimlane+ngx-graph+11.0.0-alpha.0.patch

@@ -41,7 +41,7 @@ describe('GradingKeyOverviewComponent', () => {
             imports: [
                 GradingKeyOverviewComponent,
                 MockComponent(GradingKeyTableComponent),
-                MockComponent(FaIconComponent),
+                FaIconComponent,
                 MockPipe(ArtemisTranslatePipe),
                 MockDirective(TranslateDirective),
                 MockPipe(SafeHtmlPipe),

src/main/webapp/app/assessment/manage/assessment-layout/assessment-layout.component.spec.ts

@@ -12,14 +12,15 @@ import { HelpIconComponent } from 'app/shared/components/help-icon/help-icon.com
 import { NgbCollapse, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service';
 import { TranslateService } from '@ngx-translate/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 describe('StructuredGradingInstructionsAssessmentLayoutComponent', () => {
     let comp: StructuredGradingInstructionsAssessmentLayoutComponent;
     let fixture: ComponentFixture<StructuredGradingInstructionsAssessmentLayoutComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [MockDirective(NgbTooltip), MockDirective(NgbCollapse)],
+            imports: [MockDirective(NgbTooltip), MockDirective(NgbCollapse), FaIconComponent],
             declarations: [
                 StructuredGradingInstructionsAssessmentLayoutComponent,
                 MockComponent(HelpIconComponent),

src/main/webapp/app/assessment/manage/grading-system/grading-key-overview/grading-key-overview.component.spec.ts

@@ -65,6 +65,7 @@ import { TutorParticipationService } from 'app/assessment/shared/assessment-dash
 import { InfoPanelComponent } from 'app/assessment/shared/info-panel/info-panel.component';
 import { SecondCorrectionEnableButtonComponent } from 'app/assessment/shared/assessment-dashboard/exercise-dashboard/second-correction-button/second-correction-enable-button.component';
 import { LanguageTableCellComponent } from 'app/assessment/shared/assessment-dashboard/exercise-dashboard/language-table-cell/language-table-cell.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 describe('ExerciseAssessmentDashboardComponent', () => {
     let comp: ExerciseAssessmentDashboardComponent;
@@ -206,7 +207,7 @@ describe('ExerciseAssessmentDashboardComponent', () => {
             }),
         },
     } as any as ActivatedRoute;
-    const imports = [RouterModule.forRoot([]), ExerciseAssessmentDashboardComponent];
+    const imports = [RouterModule.forRoot([]), ExerciseAssessmentDashboardComponent, FaIconComponent];
 
     const declarations = [
         MockComponent(TutorLeaderboardComponent),

src/main/webapp/app/assessment/manage/structured-grading-instructions-assessment-layout/structured-grading-instructions-assessment-layout.component.spec.ts

@@ -22,6 +22,7 @@ import { StandardizedCompetencyFilterComponent } from 'app/atlas/shared/standard
 import { StandardizedCompetencyService } from 'app/atlas/shared/standardized-competencies/standardized-competency.service';
 import { StandardizedCompetencyDetailComponent } from 'app/atlas/shared/standardized-competencies/standardized-competency-detail.component';
 import { KnowledgeAreaTreeComponent } from 'app/atlas/shared/standardized-competencies/knowledge-area-tree.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 describe('CourseImportStandardizedCompetenciesComponent', () => {
     let componentFixture: ComponentFixture<CourseImportStandardizedCompetenciesComponent>;
@@ -33,7 +34,13 @@ describe('CourseImportStandardizedCompetenciesComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CourseImportStandardizedCompetenciesComponent, StandardizedCompetencyFilterComponent, StandardizedCompetencyDetailComponent, KnowledgeAreaTreeComponent],
+            imports: [
+                CourseImportStandardizedCompetenciesComponent,
+                StandardizedCompetencyFilterComponent,
+                StandardizedCompetencyDetailComponent,
+                KnowledgeAreaTreeComponent,
+                FaIconComponent,
+            ],
             declarations: [
                 StandardizedCompetencyFilterStubComponent,
                 StandardizedCompetencyDetailStubComponent,