Angular应用程序可以在Chrome中运行，但不能在具有SCRIPT5022的边缘中运行:需要标识符、字符串或数字

Question

我有一个大型的Angular 9CLI应用程序，它使用自定义的webpack配置来允许将变量从JSON文件引用到SCSS文件中。

它在Chrome上运行得很好，但在Edge上失败了。

控制台跟踪与我在AWS Lamdba + ALB中托管的生产构建大致相同

和非捆绑的站点(ng服务器)

​

我感到困惑的是，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

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

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

Answer 2

在创建动态对象的情况下，如果逗号放错了位置，则可能会发生此类错误。例如，您可以创建如下所示的对象：

var dynamicObject = {
   id: 23,
   isProperty: false,
   name: 'sth',  // <-- redundant comma
}

动态创建对象也不是强类型的。最好的方法是利用interface或class。您可能在整个项目的一部分中都有这样的定义，而不仅仅是在您收到错误的页面中。

可能在it或Edge中使用保留的关键字作为dictionary中的key的另一个原因，因此您必须重命名它或将键括在引号中。例如，class就是其中一个保留的。请注意，IE和都使用相同的名为Chakra的JavaScript引擎。