angular - 推荐修复后 IE 11 未加载 Angular 10 应用程序

Question

我已经对 Angular 10 应用程序的 IE11 问题进行了标准修复（不加载字体，捆绑文件中某些字符的脚本错误）——通过添加目标为es5的tsconfig-es5.app.json文件，我在配置对象中添加了es5条目。polyfills.ts正在导入classlist.js文件。我没有错过什么。这是我的 package.json 文件，其中包含我使用的构建和运行脚本：

您可以看到dev:es5和dev:internal:es5都有es5的配置。现在这是我的angular.json文件构建配置：

"build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "aot": true,
                    "outputPath": "dist/{MyContent}/",
                    "index": "src/index.html",
                    "main": "src/main.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "tsconfig.app.json",
                    "assets": ["src/favicon.ico", "src/assets"],
                    "styles": ["src/styles.scss"],
                    "scripts": []
                },
                "configurations": {
                    "production": {
                        "fileReplacements": [
                            {
                                "replace": "{myEnvDevFile}",
                                "with": "{myEnvProdFile}                               }
                        ],
                        "optimization": true,
                        "outputHashing": "none",
                        "sourceMap": false,
                        "extractCss": true,
                        "namedChunks": false,
                        "aot": true,
                        "extractLicenses": true,
                        "vendorChunk": false,
                        "buildOptimizer": true,
                        "budgets": [
                            {
                                "type": "initial",
                                "maximumWarning": "2mb",
                                "maximumError": "5mb"
                            },
                            {
                                "type": "anyComponentStyle",
                                "maximumWarning": "6kb"
                            }
                        ]
                    },
                    "es5": {
                        "budgets": [
                            {
                                "type": "anyComponentStyle",
                                "maximumWarning": "6kb"
                            }
                        ],
                        "tsConfig": "./tsconfig-es5.app.json"
                    }
                }
            }

这是我原来的tsconfig.app.json文件：

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

最后是tsconfig-es5.app.json文件：

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

我不认为我错过了什么。Angular CLI 是 10，所以我觉得我很好。我犯了一个明显的错误吗？

对我来说，我必须在 polyfill.ts 中缺少一个 polyfill，但我不知道是哪个。zone.js 和 classlist.js 都被导入。

标签： angularinternet-explorer-11angular10

Answer 1

请按照以下步骤Angular 10在 IE11 中运行应用程序。

第 1 步 :: 检查此 URL ( medium.com ) 并按照提及的方式进行操作。如果你很幸运，那么你的应用程序将在 IE11 上运行，如果没有，请按照步骤 2。

第 2 步 :: 您可能会在终端中遇到以下错误 -

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/reflect' in '...\src'

然后你必须注释掉import 'core-js/es6/reflect'并添加下面的代码polyfills.ts-

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

/** IE9, IE10 and IE11 requires all of the following polyfills. */
import 'core-js/es/reflect';
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/array';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/set';

步骤 2 的参考 URL -未找到模块：错误：无法解析 'core-js/es6'