Updated angular project to allow wasm files to load with this PR - cornerstonejs/cornerstone3D#1982

Author: taskinoz

angular.json

@@ -16,19 +16,31 @@
             "outputPath": "dist/angular-vite-6",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "openjphjs.wasm",
+                "input": "node_modules/@cornerstonejs/codec-openjph/dist/"
+              },
+              {
+                "glob": "openjpegwasm_decode.wasm",
+                "input": "node_modules/@cornerstonejs/codec-openjpeg/dist/"
+              },
+              {
+                "glob": "libjpegturbowasm_decode.wasm",
+                "input": "node_modules/@cornerstonejs/codec-libjpeg-turbo-8bit/dist/"
+              },
+              {
+                "glob": "charlswasm_decode.wasm",
+                "input": "node_modules/@cornerstonejs/codec-charls/dist"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -37,7 +49,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -73,20 +85,15 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         }

src/app/cornerstone-viewport/cornerstone-viewport.component.ts

@@ -97,7 +97,7 @@ export class CornerstoneViewportComponent implements OnInit {
 
         cornerstoneDICOMImageLoader.wadors.metaDataManager.add(
           imageId,
-          instanceMetaData
+          instanceMetaData,
         );
         return imageId;
       });
@@ -110,7 +110,20 @@ export class CornerstoneViewportComponent implements OnInit {
 
     await csRenderInit();
     await csToolsInit();
-    dicomImageLoaderInit({ maxWebWorkers: 1 });
+    dicomImageLoaderInit({
+      maxWebWorkers: 1,
+      /**
+       * Customise the paths to the required WASM files.  These paths are
+       * determined by your output path for these files in `angular.json`. @see
+       * file://../../../angular.json or see the README for more details.
+       */
+      decodeConfig: {
+        wasmUrlCodecCharls: './charlswasm_decode.wasm',
+        wasmUrlCodecLibJpegTurbo8bit: './libjpegturbowasm_decode.wasm',
+        wasmUrlCodecOpenJpeg: './openjpegwasm_decode.wasm',
+        wasmUrlCodecOpenJph: './openjphjs.wasm',
+      },
+    });
 
     const imageIds = await createImageIdsAndCacheMetaData({
       StudyInstanceUID:
@@ -136,7 +149,7 @@ export class CornerstoneViewportComponent implements OnInit {
     renderingEngine.enableElement(viewportInput);
 
     const viewport = renderingEngine.getViewport(
-      viewportId
+      viewportId,
     ) as Types.IVolumeViewport;
 
     const volumeId = 'myVolume';