Angular 应用程序可在 Chrome 中运行，但不能在 Edge 中使用 SCRIPT5022 : Expected identifier, 字符串或数字

Question

我有一个大型 Angular 9 CLI 应用程序，它使用自定义 webpack 配置来允许将 JSON 文件中的变量引用到 SCSS 文件中。
它在 Chrome 中运行良好，但在 Edge 中失败。
控制台跟踪与我在 AWS Lamdba + ALB 中托管的生产构建大致相同
和非捆绑站点(ng serve)

我很困惑 Edge devtools 将问题定位在索引文件中的位置 (1,1):

这是我的自定义 webpack 配置:

const merge = require('webpack-merge');
const jsonImporter = require('node-sass-json-importer');

module.exports = function(defaultConfig) {
  // console.log('>>>>> debug default config rules', defaultConfig.module.rules);
  const config = {
    module: {
      rules: [
        {
          test: /\.scss$|\.sass$/,
          use: [
            {
              loader: require.resolve('sass-loader'),
              options: {
                implementation: require('node-sass'),
                sassOptions: {
                  // bootstrap-sass requires a minimum precision of 8
                  precision: 8,
                  importer: jsonImporter(),
                  outputStyle: 'expanded'
                }
              }
            }
          ]
        }
      ]
    }
  };
  return merge(defaultConfig, config);
};

我的 tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["./*", "app/*", "test/*"]
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

我的 tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "**/*.stories.ts"
  ]
}

我的 package.json:

{
  "name": "XYZ",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-public": "ng build --configuration=gopub",
    "test": "ng test",
    "test-headless": "ng test --watch=false --browsers=ChromeHeadless",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "doc": "node src/scripts/runMarked.js",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@angular/animations": "^9.1.4",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "^9.1.4",
    "@angular/compiler": "^9.1.4",
    "@angular/core": "^9.1.4",
    "@angular/forms": "^9.1.4",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "^9.1.4",
    "@angular/platform-browser-dynamic": "^9.1.4",
    "@angular/router": "^9.1.4",
    "@angular/service-worker": "^10.0.1",
    "@azure/msal-angular": "^1.0.0-beta.5",
    "@material/chips": "^6.0.0",
    "@types/vega": "^3.2.0",
    "d3": "^5.15.0",
    "karma-viewport": "^1.0.5",
    "marked": "^0.8.0",
    "msal": "^1.3.2",
    "ngx-spinner": "^9.0.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "vega": "^5.9.1",
    "vega-embed": "^6.2.2",
    "vega-lite": "^4.12.0",
    "vega-typings": "^0.12.4",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.0.0",
    "@angular-devkit/build-angular": "^0.901.0",
    "@angular/cli": "^9.1.4",
    "@angular/compiler-cli": "^9.1.4",
    "@angular/language-service": "^9.1.4",
    "@babel/core": "^7.10.2",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/angular": "^5.3.19",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "babel-loader": "^8.1.0",
    "codelyzer": "^5.1.2",
    "compression-webpack-plugin": "^3.1.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^2.0.1",
    "minimist": "^1.2.5",
    "ng-mocks": "^9.6.2",
    "node-sass": "^4.14.1",
    "node-sass-json-importer": "^4.1.2",
    "prettier": "1.19.1",
    "protractor": "~5.4.3",
    "terser-webpack-plugin": "^2.3.5",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "~3.7.5"
  }
}

我可以遵循什么策略来找出问题的真正根源？

Answer 1

尝试在 index.html 的 head 部分添加以下代码

<meta http-equiv="X-UA-Compatible" content="IE=edge">