CentreForDigitalHumanities · XanderVertegaal · Jun 24, 2025 · May 23, 2025 · May 23, 2025 · May 28, 2025
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python Debugger: Current File",
+            "type": "debugpy",
+            "request": "launch",
+            "program": "${file}",
+            "console": "integratedTerminal"
+        },
+        {
+            "name": "Python Debugger: Pytest Functional Tests",
+            "type": "debugpy",
+            "request": "launch",
+            "module": "pytest",
+            "args": ["functional-tests"],
+            "console": "integratedTerminal"
+        }
+    ]
+}
diff --git a/backend/langpro_annotator/index.py b/backend/langpro_annotator/index.py
@@ -10,6 +10,9 @@ def index(request: HttpRequest):
     language = request.LANGUAGE_CODE
     page = request.path[1:].split("/", 1)[0]
     # pre-rendered version available?
+    print('Location:', path.join(language, page, "index.html"))
+    print('Language code:', language)
+
     location = finders.find(path.join(language, page, "index.html"))
     if not location:
         location = finders.find(path.join(language, "index.html"))

diff --git a/frontend/angular.json b/frontend/angular.json
@@ -23,9 +23,7 @@
                         "outputPath": "dist",
                         "index": "src/index.html",
                         "browser": "src/main.ts",
-                        "polyfills": [
-                            "zone.js"
-                        ],
+                        "polyfills": ["zone.js", "@angular/localize/init"],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "assets": [
@@ -49,9 +47,7 @@
                         "scripts": [],
                         "server": "src/main.server.ts",
                         "prerender": true,
-                        "ssr": {
-                            "entry": "server.ts"
-                        },
+                        "ssr": false,
                         "baseHref": "/"
                     },
                     "configurations": {
@@ -77,9 +73,7 @@
                             "sourceMap": true
                         },
                         "nl": {
-                            "localize": [
-                                "nl"
-                            ]
+                            "localize": ["nl"]
                         }
                     },
                     "defaultConfiguration": "production"
@@ -109,17 +103,16 @@
                         "format": "xlf",
                         "outputPath": "locale",
                         "includeContext": true,
-                        "targetFiles": [
-                            "messages.nl.xlf"
-                        ]
+                        "targetFiles": ["messages.nl.xlf"]
                     }
                 },
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
                         "polyfills": [
                             "zone.js",
-                            "zone.js/testing"
+                            "zone.js/testing",
+                            "@angular/localize/init"
                         ],
                         "tsConfig": "tsconfig.spec.json",
                         "inlineStyleLanguage": "scss",
@@ -128,26 +121,22 @@
                             "src/favicon.svg",
                             "src/assets"
                         ],
-                        "styles": [
-                            "src/styles.scss"
-                        ],
+                        "styles": ["src/styles.scss"],
                         "scripts": [],
                         "karmaConfig": "karma.conf.js"
                     }
                 }
             },
             "i18n": {
                 "sourceLocale": {
-                    "code": "en",
-                    "baseHref": "/en/"
+                    "code": "en"
                 },
                 "locales": {
                     "nl": {
-                        "translation": "locale/messages.nl.xlf",
-                        "baseHref": "/nl/"
+                        "translation": "locale/messages.nl.xlf"
                     }
                 }
             }
         }
     }
-}
+}
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,62 +1,60 @@
 {
-    "name": "langpro-annotator",
-    "scripts": {
-        "start": "yarn serve",
-        "build": "ng build --base-href=/static/ --localize",
-        "watch": "ng build --watch",
-        "test": "ng test --watch=true",
-        "serve:ssr:langpro-annotator": "node dist/langpro-annotator/server/server.mjs",
-        "prebuild": "node ./build/build-pre.js",
-        "i18n": "ng extract-i18n --output-path locale",
-        "preserve": "yarn prebuild",
-        "serve": "ng serve",
-        "serve:en": "ng serve --configuration=en",
-        "serve:nl": "ng serve --configuration=nl",
-        "stop": "lsof -t -i tcp:4200 | xargs kill -9 || echo \"not running\"",
-        "pretest": "yarn prebuild",
-        "test-once": "ng test --watch=false"
-    },
-    "private": true,
-    "dependencies": {
-        "@angular/animations": "^17.3.0",
-        "@angular/common": "^17.3.0",
-        "@angular/compiler": "^17.3.0",
-        "@angular/core": "^17.3.0",
-        "@angular/forms": "^17.3.0",
-        "@angular/platform-browser": "^17.3.0",
-        "@angular/platform-browser-dynamic": "^17.3.0",
-        "@angular/platform-server": "^17.3.0",
-        "@angular/router": "^17.3.0",
-        "@angular/ssr": "^17.3.13",
-        "@fortawesome/angular-fontawesome": "^0.14.1",
-        "@fortawesome/fontawesome-svg-core": "^6.5.2",
-        "@fortawesome/free-solid-svg-icons": "^6.5.2",
-        "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-        "@ngrx/effects": "^17.2.0",
-        "@ngrx/store": "^17.2.0",
-        "@popperjs/core": "^2.11.8",
-        "bootstrap": "^5.3.3",
-        "colors": "^1.4.0",
-        "express": "^4.18.2",
-        "rxjs": "~7.8.0",
-        "tslib": "^2.3.0",
-        "zone.js": "~0.14.3"
-    },
-    "devDependencies": {
-        "@angular-devkit/build-angular": "^17.3.13",
-        "@angular/cli": "^17.3.13",
-        "@angular/compiler-cli": "^17.3.0",
-        "@angular/localize": "17.3.12",
-        "@types/express": "^4.17.17",
-        "@types/jasmine": "~5.1.0",
-        "@types/node": "^18.18.0",
-        "jasmine-core": "~5.1.0",
-        "karma": "~6.4.0",
-        "karma-chrome-launcher": "~3.2.0",
-        "karma-coverage": "~2.2.0",
-        "karma-jasmine": "~5.1.0",
-        "karma-jasmine-html-reporter": "~2.1.0",
-        "ng-extract-i18n-merge": "^2.12.0",
-        "typescript": "~5.4.2"
-    }
-}
+  "name": "langpro-annotator",
+  "scripts": {
+    "start": "yarn serve",
+    "build": "ng build --base-href=/static/ --localize",
+    "watch": "ng build --watch",
+    "test": "ng test --watch=true",
+    "serve:ssr:langpro-annotator": "node dist/langpro-annotator/server/server.mjs",
+    "prebuild": "node ./build/build-pre.js",
+    "i18n": "ng extract-i18n --output-path locale",
+    "preserve": "yarn prebuild",
+    "serve": "ng serve",
+    "serve:en": "ng serve --configuration=en",
+    "serve:nl": "ng serve --configuration=nl",
+    "stop": "lsof -t -i tcp:4200 | xargs kill -9 || echo \"not running\"",
+    "pretest": "yarn prebuild",
+    "test-once": "ng test --watch=false"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^19.2.13",
+    "@angular/common": "^19.2.13",
+    "@angular/compiler": "^19.2.13",
+    "@angular/core": "^19.2.13",
+    "@angular/forms": "^19.2.13",
+    "@angular/platform-browser": "^19.2.13",
+    "@angular/platform-browser-dynamic": "^19.2.13",
+    "@angular/platform-server": "^19.2.13",
+    "@angular/router": "^19.2.13",
+    "@angular/ssr": "^19.2.13",
+    "@fortawesome/angular-fontawesome": "^1.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
+    "colors": "^1.4.0",
+    "express": "^4.18.2",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.13",
+    "@angular/cli": "^19.2.13",
+    "@angular/compiler-cli": "^19.2.13",
+    "@angular/localize": "19.2.13",
+    "@types/express": "^4.17.17",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-extract-i18n-merge": "^2.12.0",
+    "typescript": "~5.8.3"
+  }
+}
diff --git a/frontend/server.ts b/frontend/server.ts
@@ -1,5 +1,5 @@
 import { APP_BASE_HREF } from "@angular/common";
-import { CommonEngine } from "@angular/ssr";
+import { CommonEngine } from "@angular/ssr/node";
 import express from "express";
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve } from "node:path";

diff --git a/.../src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html b/.../src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html
@@ -5,13 +5,9 @@ <h3 class="h5" i18n>Knowledge Base</h3>
     <div class="card-body">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <ul formArrayName="kbItems" class="ps-0 list-unstyled">
-                <li
-                    *ngFor="
-                        let kbItem of form.controls.kbItems.controls;
-                        let i = index
-                    "
-                    class="mb-3"
-                >
+                @for (kbItem of form.controls.kbItems.controls; let i = $index;
+                track $index) {
+                <li class="mb-3">
                     <div [formGroupName]="i" class="input-group">
                         <input
                             type="text"
@@ -27,9 +23,12 @@ <h3 class="h5" i18n>Knowledge Base</h3>
                             <option value="" disabled selected i18n>
                                 Select Relationship
                             </option>
-                            <option *ngFor="let relationship of relationshipTypes" [value]="relationship">
+                            @for (relationship of relationshipTypes; track
+                            $index) {
+                            <option [value]="relationship">
                                 {{ getRelationshipTypeName(relationship) }}
                             </option>
+                            }
                         </select>
                         <input
                             type="text"
@@ -53,6 +52,7 @@ <h3 class="h5" i18n>Knowledge Base</h3>
                         </button>
                     </div>
                 </li>
+                }
             </ul>
             <div class="btn-group" role="group">
                 <button

diff --git a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html
@@ -5,10 +5,10 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
     <div class="card-body">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <ul formArrayName="premises" class="ps-0 list-unstyled">
-                <li
-                    *ngFor="let premise of premises.controls; let i = index"
-                    class="mb-3"
-                >
+                @for (premise of premises.controls; let i = $index; track
+                $index) {
+
+                <li class="mb-3">
                     <label
                         [attr.for]="'premise-' + i"
                         class="form-label fw-bold"
@@ -38,6 +38,7 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
                         </button>
                     </div>
                 </li>
+                }
             </ul>
             <button
                 type="button"

diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
@@ -1,20 +1,30 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed, waitForAsync } from "@angular/core/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { provideHttpClientTesting } from "@angular/common/http/testing";
 
-import { AppComponent } from './app.component';
+import { AppComponent } from "./app.component";
+import {
+    provideHttpClient,
+    withInterceptorsFromDi,
+} from "@angular/common/http";
+import { ActivatedRoute } from "@angular/router";
 
-describe('AppComponent', () => {
+describe("AppComponent", () => {
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            imports: [
-                AppComponent, NoopAnimationsModule, RouterTestingModule, HttpClientTestingModule]
+            imports: [AppComponent, NoopAnimationsModule],
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+                {
+                    provide: ActivatedRoute,
+                    useValue: {},
+                },
+            ],
         }).compileComponents();
     }));
 
-
-    it('should create the app', () => {
+    it("should create the app", () => {
         const fixture = TestBed.createComponent(AppComponent);
         const app = fixture.debugElement.componentInstance;
         expect(app).toBeTruthy();
@@ -26,10 +36,12 @@ describe('AppComponent', () => {
         expect(app.title).toEqual(`LangPro Annotator`);
     });
 
-    it('should render title', () => {
+    it("should render title", () => {
         const fixture = TestBed.createComponent(AppComponent);
         fixture.detectChanges();
         const compiled = fixture.debugElement.nativeElement;
-        expect(compiled.querySelector('.navbar-brand').textContent).toContain('LangPro Annotator');
+        expect(compiled.querySelector(".navbar-brand").textContent).toContain(
+            "LangPro Annotator"
+        );
     });
 });