IE 11 在 Angular 7 应用程序的 chunk.js 上抛出语法错误

Question

我们正在构建一个需要支持 IE11 的 Angular 7 应用程序。所以这在我本地开发人员的 IE 框中工作正常。但是，当部署到更高的环境时，它会在 chunk.js 上给出一个语法错误，因为哪个应用程序没有呈现：

SCRIPT1002: Syntax Error
0.f7d1b3144b6e689b2f6b.chunk.js (1,1088655)

这在包括 EDGE 在内的所有其他浏览器中都可以正常工作。 我不知道如何调试/理解这个错误。任何帮助，将不胜感激。 我添加了以下 polyfill：

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es7/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

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

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone'; // Included with Angular CLI.

tsconfig-aot.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "skipLibCheck": true,
        "outDir": "target/www/app",
        "lib": ["es7", "dom"],
        "typeRoots": [
            "node_modules/@types"
        ],
        "baseUrl": "./",
        "paths": {
            "app/*": ["src/main/webapp/app/*"]
        },
        "importHelpers": true
    },
    "angularCompilerOptions": {
        "genDir": "target/aot",
        "skipMetadataEmit" : true,
        "fullTemplateTypeCheck": true,
        "preserveWhitespaces": true
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "suppressImplicitAnyIndexErrors": true,
        "outDir": "target/classes/static/app",
        "lib": ["es7", "dom"],
        "typeRoots": [
            "node_modules/@types"
        ],
        "baseUrl": "./",
        "paths": {
            "app/*": ["src/main/webapp/app/*"]
        },
        "importHelpers": true,
        "allowJs": true
    },
  "include": [
    "src/main/webapp/app",
    "src/test/javascript/"
  ],
    "exclude": [
        "node_modules"
    ]
}

Answer 1

您的源代码中有一个class 关键字，IE11（仅支持 ES5）不支持它。您需要更改target 属性哟es5。

您可以像这样添加tsconfig-es5.app.json 文件：

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

然后在你的 angular.json 文件中，添加一个es5 配置目标：

"configurations": {
    "es5" : {
                  "tsConfig": "./tsconfig-es5.app.json"
                }
}

那么，你应该可以运行了：npm run build --configuration=es5