SF-3635 Angular 20 upgrade (#3568)

Author: siltomato

.github/workflows/build-and-test.yml

@@ -108,7 +108,7 @@ jobs:
           set -euo pipefail
           cd src/SIL.XForge.Scripture/ClientApp
           npm run test:gha | tee test_output.log
-          if grep --perl-regex 'NG\d+|ERROR:|WARN:|LOG:|INFO:' test_output.log; then
+          if grep --perl-regex '\bNG\d+\b|ERROR:|WARN:|LOG:|INFO:' test_output.log; then
             echo "Error: Disallowed token found in test run output, as shown above.";
             exit 1;
           fi

src/RealtimeServer/package-lock.json

@@ -66,6 +66,6 @@
     "sharedb-mingo-memory": "^4.0.1",
     "ts-jest": "^29.1.2",
     "ts-mockito": "^2.6.1",
-    "typescript": "~5.7.3"
+    "typescript": "~5.9.3"
   }
 }

src/RealtimeServer/package.json

@@ -19,7 +19,7 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
@@ -119,7 +119,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {},
           "configurations": {
             "production": {
@@ -132,24 +132,33 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "SIL.XForge.Scripture:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
             "karmaConfig": "./src/karma.conf.js",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": ["src/styles.scss", "src/material-styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
+              "includePaths": ["node_modules", "."]
             },
-            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.json",
+              {
+                "glob": "**/*",
+                "input": "src/app/checking/checking/test-audio",
+                "output": "/assets/audio"
+              }
+            ],
             "sourceMap": false,
             "webWorkerTsConfig": "tsconfig.worker.json"
           }
@@ -186,6 +195,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@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": "."
     }
   }
 }

src/SIL.XForge.Scripture/ClientApp/angular.json

@@ -102,7 +102,13 @@ export async function communityChecking(
   const count = Number.parseInt((await importButtonLocator.textContent())!.match(/\d+/)![0]);
   console.log(`Importing ${count} questions`);
   await user.click(importButtonLocator);
-  await expect(page.getByRole('heading', { name: /Imported \d+ of \d+ questions/ })).toBeVisible();
+
+  const importHeaderLocator = page.getByRole('heading', { name: /Imported \d+ of \d+ questions/ });
+  await expect(importHeaderLocator).toBeVisible();
+
+  // Wait for the questions to be imported
+  await expect(importHeaderLocator).toBeHidden({ timeout: 60_000 });
+
   // FIXME(application-bug) We should be able to look for the exact number of questions that should be imported, but the
   // page frequently fails to update after the import is complete. A single digest cycle appears to always fix it.
   await user.click(page.getByRole('button', { name: /John \d+ questions/ }).first());