Migrate to Angular 18

.gitignore

@@ -8,6 +8,8 @@
 
 # Node
 /client/node_modules
+/client/.cache
+/client/package-lock.json
 npm-debug.log
 yarn-error.log
 
@@ -45,5 +47,4 @@ Thumbs.db
 logs
 *.log
 
-desktop.ini
-/client/.cache
+desktop.ini

client/.dockerignore

@@ -1,2 +1,3 @@
 node_modules
-npm-debug.log
+npm-debug.log
+package-lock.json

client/Dockerfile

@@ -1,19 +1,16 @@
-# first stage - build angular project #
+# first stage - build angular project
 FROM node:lts-alpine AS build
 # create virtual directory in image
 WORKDIR /dist/src/app
 RUN npm cache clean --force
 # copy files from local machine to virtual directory in image
 COPY . .
-# install python3 and other dependencies for node-gyp (which is somehow required by the angular build)
-RUN apk add --no-cache --virtual .build-deps alpine-sdk python3
 # install dependencies
 RUN npm install
-RUN npm run build:traefik --omit=dev
+RUN npm run build:traefik
 
-
-# second stage - serve compiled output via nginx server #
+# second stage - serve compiled output via nginx server
 FROM nginx:latest AS ngi
-COPY --from=build /dist/src/app/dist/tease /usr/share/nginx/html
+COPY --from=build /dist/src/app/dist/tease/browser /usr/share/nginx/html
 COPY nginx.conf  /etc/nginx/conf.d/default.conf
 EXPOSE 80

client/angular.json

@@ -18,25 +18,31 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
             "allowedCommonJsDependencies": [
               "dragula",
               "html2canvas",
               "jszip",
               "javascript-lp-solver",
               "file-saver",
-              "crypto-js"
+              "crypto-js",
+              "i18n-iso-countries"
             ],
-            "outputPath": "dist/tease",
+            "outputPath": {
+              "base": "dist/tease"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": ["zone.js", "./window-global-fix.ts"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/assets"],
             "styles": ["src/styles.scss", "node_modules/ngx-toastr/toastr.css", "src/scss/bootstrap-theme.scss"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts",
+            "stylePreprocessorOptions": {
+              "includePaths": ["."]
+            }
           },
           "configurations": {
             "production": {
@@ -69,14 +75,10 @@
               },
               "namedChunks": true,
               "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
+              "extractLicenses": true
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true,
@@ -91,7 +93,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "tease:build:production"
@@ -103,7 +105,7 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "tease:build"
           }

client/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --configuration development --host 0.0.0.0 --port 80 --disable-host-check",
+    "start": "ng serve --configuration development --host 0.0.0.0 --port 80",
     "build": "ng build --stats-json",
     "build:prod": "ng build --configuration production --stats-json",
     "build:traefik": "ng build --configuration production --base-href /tease/ --stats-json",
@@ -32,36 +32,36 @@
     "Dora Dzvonyar <[email protected]>"
   ],
   "dependencies": {
-    "@angular/animations": "17.0.7",
-    "@angular/cdk": "17.0.4",
-    "@angular/common": "17.0.7",
-    "@angular/compiler": "17.0.7",
-    "@angular/core": "17.0.7",
-    "@angular/forms": "17.0.7",
-    "@angular/platform-browser": "17.0.7",
-    "@angular/platform-browser-dynamic": "17.0.7",
-    "@angular/router": "17.0.7",
-    "@fortawesome/angular-fontawesome": "^0.14.1",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@angular/animations": "18.1.0",
+    "@angular/cdk": "18.1.0",
+    "@angular/common": "18.1.0",
+    "@angular/compiler": "18.1.0",
+    "@angular/core": "18.1.0",
+    "@angular/forms": "18.1.0",
+    "@angular/platform-browser": "18.1.0",
+    "@angular/platform-browser-dynamic": "18.1.0",
+    "@angular/router": "18.1.0",
+    "@fortawesome/angular-fontawesome": "0.15.0",
+    "@fortawesome/fontawesome-svg-core": "6.5.2",
+    "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@stomp/stompjs": "^7.0.0",
-    "bootstrap": "5.3.2",
-    "chart.js": "^4.4.2",
+    "bootstrap": "5.3.3",
+    "chart.js": "^4.4.3",
     "crypto-js": "4.2.0",
     "dragula": "3.7.3",
     "file-saver": "2.0.5",
     "html2canvas": "1.4.1",
-    "i18n-iso-countries": "^7.10.0",
+    "i18n-iso-countries": "^7.11.2",
     "javascript-lp-solver": "0.4.24",
     "jszip": "3.10.1",
-    "ng2-charts": "^6.0.0",
-    "ng2-dragula": "5.0.1",
-    "ngx-capture": "^0.13.0",
-    "ngx-toastr": "^18.0.0",
+    "ng2-charts": "^6.0.1",
+    "ng2-dragula": "5.1.0",
+    "ngx-capture": "^0.14.0",
+    "ngx-toastr": "^19.0.0",
     "papaparse": "5.4.1",
     "rxjs": "7.8.1",
-    "tslib": "2.6.2",
-    "zone.js": "0.14.2"
+    "tslib": "2.6.3",
+    "uuid": "^10.0.0"
   },
   "overrides": {
     "semver": "7.5.4",
@@ -77,25 +77,25 @@
     "child_process": false
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.0.7",
-    "@angular-eslint/builder": "17.1.1",
-    "@angular-eslint/eslint-plugin": "17.1.1",
-    "@angular-eslint/eslint-plugin-template": "17.1.1",
-    "@angular-eslint/schematics": "17.1.1",
-    "@angular-eslint/template-parser": "17.1.1",
-    "@angular/cli": "17.0.7",
-    "@angular/compiler-cli": "17.0.7",
-    "@angular/localize": "17.0.7",
-    "@cypress/schematic": "^2.5.1",
-    "@types/crypto-js": "^4.2.1",
+    "@angular-eslint/builder": "18.1.0",
+    "@angular-eslint/eslint-plugin": "18.1.0",
+    "@angular-eslint/eslint-plugin-template": "18.1.0",
+    "@angular-eslint/schematics": "18.1.0",
+    "@angular-eslint/template-parser": "18.1.0",
+    "@angular/build": "^18.1.0",
+    "@angular/cli": "18.1.0",
+    "@angular/compiler-cli": "18.1.0",
+    "@angular/localize": "18.1.0",
+    "@cypress/schematic": "^2.5.2",
+    "@types/crypto-js": "^4.2.2",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "eslint": "^8.53.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-prettier": "5.0.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
     "ng-openapi-gen": "^0.51.0",
-    "prettier": "^3.0.3",
-    "prettier-eslint": "^16.1.1",
-    "typescript": "5.2.2"
+    "prettier": "^3.3.3",
+    "prettier-eslint": "^16.3.0",
+    "typescript": "5.5.3"
   }
 }

client/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule, Provider, forwardRef } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -31,27 +31,21 @@ export const API_INTERCEPTOR_PROVIDER: Provider = {
   multi: true,
 };
 
-@NgModule({
-  declarations: [AppComponent, OverlayHostDirective],
-  imports: [
-    /* external modules */
-    BrowserModule,
-    NgbModule,
-    AppRoutingModule,
-    DragulaModule.forRoot(),
-    ReactiveFormsModule,
-    HttpClientModule,
-    BrowserAnimationsModule,
-    ToastrModule.forRoot(),
-    /* own modules */
-    SharedModule,
-    ComponentsModule,
-    environment.production ? ApiModule : ApiModule.forRoot({ rootUrl: 'http://localhost:3001/api' }),
-    FontAwesomeModule,
-  ],
-  providers: [OverlayService, PromptService, AuthInterceptor, API_INTERCEPTOR_PROVIDER],
-  bootstrap: [AppComponent],
-})
+@NgModule({ declarations: [AppComponent, OverlayHostDirective],
+    bootstrap: [AppComponent], imports: [
+        /* external modules */
+        BrowserModule,
+        NgbModule,
+        AppRoutingModule,
+        DragulaModule.forRoot(),
+        ReactiveFormsModule,
+        BrowserAnimationsModule,
+        ToastrModule.forRoot(),
+        /* own modules */
+        SharedModule,
+        ComponentsModule,
+        environment.production ? ApiModule : ApiModule.forRoot({ rootUrl: 'http://localhost:3001/api' }),
+        FontAwesomeModule], providers: [OverlayService, PromptService, AuthInterceptor, API_INTERCEPTOR_PROVIDER, provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {
   constructor(library: FaIconLibrary) {
     library.addIconPacks(teaseIconPack);

client/src/app/components/constraint-builder-overlay/constraint-builder-overlay.component.ts

@@ -6,7 +6,7 @@ import {
   ConstraintWrapper,
   ThresholdWrapper,
 } from 'src/app/shared/matching/constraints/constraint';
-import { v4 as uuid } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { Operator } from 'src/app/shared/matching/constraints/constraint-utils';
 import { SelectData } from 'src/app/shared/matching/constraints/constraint-functions/constraint-function';
 import { ProjectsService } from 'src/app/shared/data/projects.service';
@@ -111,7 +111,7 @@ export class ConstraintBuilderOverlayComponent implements OverlayComponentData,
       this.projectIds,
       this.constraintFunctionWrapper,
       this.thresholdWrapper,
-      tempConstraint ? this.id : uuid(),
+      tempConstraint ? this.id : uuidv4(),
       true
     );
   }

client/src/app/components/export-overlay/export-overlay.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { OverlayComponentData } from '../../overlay.service';
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 import { PromptService } from 'src/app/shared/services/prompt.service';
 import { ToastsService } from 'src/app/shared/services/toasts.service';
 import { HttpErrorResponse } from '@angular/common/http';

client/src/app/components/student-preview-card/student-preview-card.component.html

@@ -17,7 +17,7 @@
 
         <div class="d-flex justify-content-start">
           <div class="d-inline-flex gap-1">
-            @for (skillColor of skillColors; track skillColor) {
+            @for (skillColor of skillColors; track $index) {
               <div class="rounded-circle student-skill-circle" [ngClass]="'bg-' + skillColor"></div>
             }
           </div>
@@ -73,7 +73,7 @@
           <p class="text-white p-05 mb-0 lh-1 fs-xxs">{{ projectPreferenceScore }}</p>
         </div>
         <div class="d-flex gap-05 py-1">
-          @for (projectPreference of projectPreferences; track projectPreference) {
+          @for (projectPreference of projectPreferences; track projectPreference.priority) {
             <div
               class="project-preference-tile d-flex justify-content-center align-items-center px-1 rounded-4"
               [ngClass]="projectPreference.assigned ? 'bg-primary-20' : 'bg-white'">

client/src/app/shared/helpers/nationality.service.ts

@@ -1,17 +1,18 @@
 import { Injectable } from '@angular/core';
 import * as countries from 'i18n-iso-countries';
-declare const require;
+import * as en from 'i18n-iso-countries/langs/en.json';
 
 @Injectable({
   providedIn: 'root',
 })
 export class NationalityService {
   constructor() {
-    countries.registerLocale(require('i18n-iso-countries/langs/en.json'));
+    countries.registerLocale(en);
   }
 
   getNameFromCode(nationality: string): string {
     return countries.getName(nationality, 'en');
+    return '';
   }
 
   getEmojiFromCode(alpha2: string): string {

client/src/app/shared/services/csv-parser.service.ts

@@ -13,7 +13,7 @@ import {
 } from 'src/app/api/models';
 import { CsvStudent } from '../models/csvStudent';
 import { ToastsService } from './toasts.service';
-import { v4 as uuid } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { EnumService } from '../utils/enum.service';
 import * as Papa from 'papaparse';
 
@@ -150,13 +150,13 @@ export class CsvParserService {
 
   private getProjects(reference: CsvStudent): Project[] {
     return this.getAttributes<Project>(reference, 'projectPreference', value => {
-      return { id: uuid(), name: value };
+      return { id: uuidv4(), name: value };
     });
   }
 
   private getSkills(reference: CsvStudent): Skill[] {
     return this.getAttributes<Skill>(reference, 'skill', value => {
-      return { id: uuid(), title: value, description: '' };
+      return { id: uuidv4(), title: value, description: '' };
     });
   }
 

client/tsconfig.json

@@ -5,14 +5,14 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": false,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
@@ -22,7 +22,8 @@
     "useDefineForClassFields": false,
     "strictPropertyInitialization": false,
     "suppressImplicitAnyIndexErrors": true,
-    "lib": ["es2022", "dom"]
+    "lib": ["es2022", "dom"],
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,