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

【问题标题】：IE 11 not loading Angular 10 app after recommended fixes推荐修复后 IE 11 未加载 Angular 10 应用程序
【发布时间】：2021-02-11 00:22:11
【问题描述】：

我已经对 Angular 10 应用程序的 IE11 问题进行了标准修复（不加载字体、捆绑文件中某些字符的脚本错误）——通过添加 tsconfig-es5.app.json em> 文件，目标为 es5，我在 configurations 对象中添加了 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 都在导入中。

【问题讨论】：

请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?

标签： angular internet-explorer-11 angular10

【解决方案1】：

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

第 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 步的参考网址 - Module not found: Error: Can't resolve 'core-js/es6'

【讨论】：