Angular 13 with cornerstone - Automatic publicPath is not supported in this browser

Question

Just upgraded our app to angular 13, managed to get all the libraries working except for cornerstone.

Uncaught Error: Automatic publicPath is not supported in this browser

The following have failed:

1. Adding a workaround in main.ts to declare the publicpath variable declare var __webpack_public_path__: string; __webpack_public_path__ = 'valueFormerlyAssignedUsing_deployUrl';
2. Using @angular-builders/custom-webpack:browser so that I can set publicPath or deployUrl in my config.

I am trying to avoid having to:

• Eject webpack
• Modify cornerstone code

Any suggestions??

Supporting Files

Contents of cornerstone service, when I comment out the lines in the constructor the error goes away but of course cornerstone won't run.

cornerstone.service.ts

import { Injectable } from '@angular/core';

import * as dicomParser from 'dicom-parser';
import * as cornerstone from 'cornerstone-core/dist/cornerstone.js';
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.bundle.min.js';
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader/dist/cornerstoneWebImageLoader.js';
@Injectable()

export class CornerstoneService {

  constructor() {
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

    cornerstoneWADOImageLoader.webWorkerManager.initialize({
      webWorkerPath : 'assets/cornerstone/webworkers/cornerstoneWADOImageLoaderWebWorker.js',
      taskConfiguration: {
        'decodeTask' : {
          codecsPath: 'cornerstoneWADOImageLoaderCodecs.js'
        }
      }
    });
  }

  fetchDicomImage(url: string): Promise<any> {
    console.log(`fetching wado url ${url}`);
    return cornerstone.loadAndCacheImage(`wadouri:${url}`);
  }

  fetchNormalImage(url: string): Promise<any> {
    cornerstoneWebImageLoader.external.cornerstone = cornerstone;

    console.log(`fetching web url ${url}`);
    return cornerstone.loadImage(url);
  }

  destroyCache() {
    cornerstone.imageCache.purgeCache()
  }
}

package.json just the relevant bits

"dependencies" {
    "@angular/animations": "13.2.0",
    "@angular/cdk": "13.2.0",
    "@angular/common": "13.2.0",
    "@angular/compiler": "13.2.0",
    "@angular/core": "13.2.0",
    ...
    "cornerstone-core": "2.6.1",
    "cornerstone-math": "0.1.9",
    "cornerstone-tools": "6.0.6",
    "cornerstone-wado-image-loader": "4.1.1",
    "cornerstone-web-image-loader": "2.1.1",
    "es6-promise": "4.2.8",
    "es6-shim": "0.35.6",
    ...
    "reflect-metadata": "0.1.13",
    "rxjs": "7.5.2",
    "stream": "0.0.2",
    "tslib": "2.3.1",
    "uuid": "8.3.2",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.2.1",
    "@angular-devkit/core": "13.2.1",
    "@angular-eslint/builder": "13.0.1",
    "@angular-eslint/eslint-plugin": "13.0.1",
    "@angular-eslint/eslint-plugin-template": "13.0.1",
    "@angular-eslint/schematics": "13.0.1",
    "@angular-eslint/template-parser": "13.0.1",
    "@angular/cli": "13.2.1",
    "@angular/compiler-cli": "13.2.0",
    "@angular/language-service": "13.2.0",
    "@types/jasmine": "3.10.3",
    "@types/node": "17.0.13",
    "@types/pdfjs-dist": "2.10.378",
    "@types/pouchdb": "6.4.0",
    "@types/selenium-webdriver": "4.0.16",
    "@typescript-eslint/eslint-plugin": "5.10.2",
    "@typescript-eslint/parser": "5.10.2",
    "autoprefixer": "10.4.2",
    "browser-sync": "2.27.7",
    "canonical-path": "1.0.0",
    "codelyzer": "6.0.2",
    ...
    "ts-node": "10.4.0",
    "typescript": "4.5.5",
    "webdriver-manager": "12.1.8",
    "webpack-bundle-analyzer": "4.5.0"
  },

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2016",
    "paths": {
      "stream": [
          "../node_modules/stream-browserify/index.js"
      ]
    },
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "esnext",
    "baseUrl": "./"
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "preserveWhitespaces": false,
    "disableTypeScriptVersionCheck": false
  }
}