vendor.js中的SCRIPT1002语法错误 - Angular 8 IE11

Question

vendor.js中的SCRIPT1002语法错误 - Angular 8 IE11

javascriptangulartypescriptecmascript-6internet-explorer-11

4

尝试让Angular在IE11中工作。我已经尝试了网上找到的所有方法。

我遇到以下错误：

SCRIPT1002：语法错误

文件：vendor.js，行：110874，列：40

第110874行。

args[0].replace(/%[a-zA-Z%]/g, match => {
    if (match === '%%') {
        return;
    }
    index++;
    if (match === '%c') {
        // We only are interested in the *last* %c
        // (the user may have provided their own)
        lastC = index;
    }
});

我已经按照angular.io/guide/deployment的建议，配置了ES5的相关设置，并使用这些配置运行 (https://angular.io/guide/deployment "Configuring serves for ES5")。

我的polyfills.ts文件：

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone';  // Included with Angular CLI.

我的tsconfig.json文件：

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ]
    }
}

我的tsconfig.es5.json文件：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "target": "es5" 
     }
   }

我正在使用 angular 8 和 primeng; 并且我使用 ng serve -- configuration es5 运行;

更新：根据我的发现，问题出现在我使用的 socket-io-client 的依赖关系上。经过一些研究，似乎问题与 socket-io-client 的 debug 和 babel 依赖关系有关。我确实需要在我的系统上使用 socket，所以我仍在寻找解决方案。但如果我移除 socket-io-client，它将会正常运行。

我通过以下两个主题找到了问题的源头:

https://github.com/visionmedia/debug/issues/729

https://github.com/babel/babel/issues/10707

- Jean Silveira

2

供应商文件是未经转译的其他node_modules文件。我认为代码来自babel或类似工具的调试。您可以关闭调试或删除该库。例如，请参见此链接https://github.com/visionmedia/debug/issues/701 - PeterS

请注意，"target": "es2015" 会生成 Internet Explorer 不支持的代码。 - Aluan Haddad

@aluanhaddad，我创建了一个名为 tsconfig.es5.json 的配置文件，并将目标设置为 es5，使用这个配置运行代码。你还需要改变 tsconfig.json 吗？ - Jean Silveira

不，只要那是webpack正在使用的文件，那就没问题。当你遇到这些错误时，那就好。 - Aluan Haddad

@peterS 如果是这样的话，问题就比较复杂了，因为我并不直接使用 Babel，但我使用的一些库依赖于它。 - Jean Silveira

这是一件复杂的事情，因为您请求的文件是一个支持文件，不兼容IE11。要么移除依赖关系，选择一个更低版本的文件，或者更改一个库 -- 或者像链接所示转换一个node_module条目（不理想）。 - PeterS

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yu Zhou · Accepted Answer

问题在于箭头函数未能成功转译。您是否按照此答案中的步骤支持了IE 11中的Angular 8？如果您已经按照这些步骤操作，但问题仍然存在，可能是因为您使用了含有箭头函数的外部JS库。

Angular CLI不会转译JavaScript代码。第三方代码应与适当格式相匹配。您应该使用ES5版本的库使其与IE 11兼容。

您还可以参考此线程，将lib设置为"es5"、"es6"、"dom"，以查看是否有效。如果无效，只需使用ES5库版本即可。

---------------------------------------------------------------------编辑-------------------------------------------------------------

您可以使用webpack.config.js或babel.config.js中的exclude属性来转译模块。我们可以将这个：

...
  exclude: /node_modules/,
...

将其转化为：

...
  exclude: /node_modules\/(?!name-of-untranspiled-module)/,
...

参考文献: 如何处理包含es6的npm模块