Angular 9.x 应用程序无法在 IE11 中加载

Angular 9.x Application Doesn't Load in IE11

最近我们发现 Internet Explorer(IE10、IE11)不再加载我们的 Angular v9.x 应用程序。它是几个月前 bootstrapping 并加载应用程序,并通过一个守卫将使用 IE10 或 IE11 的用户重定向到一个不受支持的视图,提供有关如何升级到常绿浏览器的信息(Chrome, Edge、Firefox 等)。

由于某些原因,最近它似乎没有 bootstrap 应用程序,相反,您只是无休止地盯着 <app-root> 标签之间的徽标。使用 Windows 10 在 IE11 中没有错误,所以我没有什么可调试的。

当涉及到此类问题时,我已经排除了常见的嫌疑人(见下文),并且还查看了 Whosebug 中的多个帖子,例如 link and , and referenced link and link。我对缺少错误感到困惑,好像 Angular 不存在,但我可以看到 JS 文件被拉下(runtime.js、polyfills.js、styles.js、scripts.js、vendor.js 和 main.js)。

  1. 填充
import 'classlist.js';
import 'web-animations-js';
import 'core-js';
  1. 浏览器列表
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.
  1. ES5 tsconfig
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "es5"
  },
  "include": [
    "src/**/*.d.ts"
  ]
}
  1. 运行 快速检查:

npx es-check es5 './dist/**/*es5*.js' './dist/**/scripts.*.js' --verbose

  1. 运行 在本地生成生产文件并得到相同的结果:

cd ./dist/PROJEC_NAME && npx local-web-server

这是我特别讨厌问的问题之一,因为它无处不在,但我花了很长时间试图弄清楚为什么我们的应用程序在 IE11 中停止 运行,并且耗尽了我的知识和研究。有人有什么建议吗?

由于我们在技术上不支持 IE10 和 IE11,但我们试图阻止使用 IE10 和 IE11,因此我们决定采取更严格的方法并将内容拆分到静态 HTML 页面,位于/assets 使用 index.html 中检测不受支持的浏览器的脚本加载。这也意味着我们可以放弃我们的 polyfills。