SF-3483 Upgrade to Application Builder and Angular 19

scripts/db_tools/tsconfig.json

@@ -4,7 +4,6 @@
     "compilerOptions": {
       "module": "commonjs"
     }
-
   },
   "compilerOptions": {
     "baseUrl": "./",
@@ -23,24 +22,17 @@
     "module": "ES2020",
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
-    "lib": [
-      "es2018",
-      "dom"
-    ],
+    "lib": ["es2018", "dom"],
     "emitDecoratorMetadata": true,
-    "suppressImplicitAnyIndexErrors": true,
     "esModuleInterop": true,
-    "typeRoots": ["node_modules/@types", "../../src/RealtimeServer/typings",
-    ],
+    "typeRoots": ["node_modules/@types", "../../src/RealtimeServer/typings"],
     "resolveJsonModule": true,
     "paths": {
-      "xforge-common/*": [
-        "../../src/SIL.XForge.Scripture/ClientApp/src/xforge-common/*"
-      ],
-      "*": [ "../../src/RealtimeServer/typings/*"]
+      "xforge-common/*": ["../../src/SIL.XForge.Scripture/ClientApp/src/xforge-common/*"],
+      "*": ["../../src/RealtimeServer/typings/*"]
     },
     "inlineSourceMap": false,
     "inlineSources": true,
-    "noEmit": false,
+    "noEmit": false
   }
 }

src/RealtimeServer/package.json

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

src/SIL.XForge.Scripture/ClientApp/.gitignore

@@ -2,7 +2,6 @@
 
 # compiled output
 /dist
-/dist-server
 /tmp
 /out-tsc
 

src/SIL.XForge.Scripture/ClientApp/.storybook/main.ts

@@ -7,7 +7,8 @@ module.exports = {
   },
   docs: {},
   staticDirs: [
-    { from: '../src/assets', to: '/assets' },
-    { from: '../src/app/checking/checking/test-audio', to: '/assets/audio/' }
+    // Note that 'embedded' directories appear to need to be higher, not lower.
+    { from: '../src/app/checking/checking/test-audio', to: '/assets/audio' },
+    { from: '../src/assets', to: '/assets' }
   ]
 };

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

@@ -19,14 +19,14 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "progress": true,
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -36,7 +36,7 @@
             ],
             "styles": ["src/styles.scss", "src/material-styles.scss", "src/themes/themes.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
+              "includePaths": ["node_modules", "."]
             },
             "allowedCommonJsDependencies": [
               "@bugsnag/browser",
@@ -58,9 +58,7 @@
             ],
             "scripts": [],
             "aot": false,
-            "vendorChunk": true,
             "extractLicenses": true,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
@@ -84,9 +82,7 @@
               "outputHashing": "all",
               "namedChunks": true,
               "aot": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             },
             "staging": {
               "budgets": [
@@ -105,9 +101,7 @@
               "outputHashing": "all",
               "namedChunks": true,
               "aot": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             },
             "pwaTest": {
               "fileReplacements": [
@@ -118,8 +112,7 @@
               ],
               "outputHashing": "all",
               "namedChunks": true,
-              "vendorChunk": false,
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {}
           },
@@ -133,7 +126,6 @@
               "buildTarget": "SIL.XForge.Scripture:build:production"
             },
             "development": {
-              "publicHost": "localhost:4200",
               "buildTarget": "SIL.XForge.Scripture:build:development"
             }
           },

src/SIL.XForge.Scripture/ClientApp/e2e/workflows/generate-draft.ts

@@ -74,14 +74,12 @@ export async function generateDraft(
   await expect(closeLocator).toBeVisible({ timeout: 5 * 60_000 });
   await user.click(closeLocator);
 
-  // The stepper renders every step to the page at once, so we need to keep track of which step we're on
-  let currentStep = 0;
+  // The stepper renders every step to the page at once. Get the step we're on.
   function getStep(): Locator {
-    return page.locator(`#cdk-step-content-0-${currentStep}`);
+    return page.locator('.mat-horizontal-stepper-content-current');
   }
   async function goToNextStepExpectingHeading(expectedHeading: string): Promise<void> {
     await user.click(getStep().getByRole('button', { name: 'Next' }));
-    currentStep++;
     await expect(getStep().getByRole('heading', { name: expectedHeading })).toBeVisible();
     await user.wait(1500);
   }