Angular 7 项目在 Internet Explorer 11 中无法正常工作。

Question

我已经按照互联网上不同的帖子所提到的做了一切，但我的问题仍然存在。

我取消了为IE 9、10、11所需的polyfills的注释

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

我在index.html中应用了元标记。

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

但我仍然在使用IE 11时遇到错误：

• SCRIPT438: 对象不支持属性或方法“bind” runtime.js (208,11)

• SCRIPT1010: 预期标识符 polyfills.js (3846,36)

• SCRIPT1010: 预期标识符 styles.js (310,24)

• SCRIPT1028: 预期标识符、字符串或数字 vendor.js (298,5)

• SCRIPT1010: 预期标识符 main.js (1424,32)

编辑1 这是我的tsconfig.json文件：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "jszip": [
        "../node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

我该怎么办？

非常感谢任何帮助。

- TAB

---

你看过这个吗？：https://github.com/angular/angular-cli/issues/11384 - Jacopo Sciampi

是的，我已经阅读了那篇文章，但如果你看到有人在执行那篇文章中提到的操作后仍然出现错误。 - TAB

谢谢你的回答。如果我找到了什么，我会添加评论。干杯。 - Elegie

我也遇到了类似的问题。尝试了所有方法，请回答。 - Uland Nimblehoof

是的，仍然存在同样的问题。目前还没有找到任何解决方案。但是如果我找到了可行的解决方案，我一定会在这里发布。 - TAB

Answer 1

我用以下4个步骤解决了这个问题！对于您，从第3步开始。

1. 在您的项目中找到polyfill.ts

2. 取消注释所有注释的导入 - 保存

3. 安装以下npm

   • npm install --save classlist.js
   • npm install --save web-animations-js

4. ng serve

来源： https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9

++ 如果您使用的是angular8，请参考： https://stackoverflow.com/a/59317315/10109195

- Energy

---

尽管我按照以上所有步骤操作，但仍然出现白屏问题。 - Cpt Kitkat

同样。这并不是对所有人都适用的polyfill问题。我注意到在路由器跟踪日志中（在路由器模块的配置中启用enableTracing: true）发现了一些奇怪的事情……当涉及到相对路径时，IE似乎处理base标签的方式与其他浏览器非常不同，并且无法看到紧随url中＃后面的查询字符串参数。 - Ed Meacham

Answer 2

升级到 Angular v8 有什么好处？

自上一个主要版本以来，构建过程已经针对旧浏览器进行了优化。

在 Angular CLI 版本 8 及更高版本中，应用程序使用差分加载进行构建，这是一种策略，CLI 会构建两个单独的包作为您部署的应用程序的一部分。

• 第一个包含现代 ES2015语法，利用现代浏览器内置支持，少量填充，结果是更小的包大小。

• 第二个包含旧的ES5语法的代码，以及所有必要的填充。这会导致包大小变大，但支持旧的浏览器。

在 IE 上开发

如果您将 Angular 升级到 v8，则应查看https://dev59.com/6lMI5IYBdhLWcg3wXqVz#56573079以解决一些开发模式和 CSS 方面的问题。

- Martin Choraine

---

我会试一试并回报结果。谢谢Martin。 - Ed Meacham

这并没有解决我们的问题，反而出现了新的问题。我还要进行更多的测试，如果我找到了解决方案，我一定会在这里发布。再次感谢Martin。 - Ed Meacham

好的，问题已解决！我们不仅需要升级到A8，还需要更改tsconfig（如OP中所述--具体来说，“target”：“es5”），最终我们不得不在构建命令中设置deploy-url和base-href，因为索引文件中的基础标签由于某种未知原因未被观察到。（https://shekhargulati.com/2017/07/06/angular-4-use-of-base-href-and-deploy-url-build-options/） - Ed Meacham

太好了！抱歉我应该更明确一些。自从 Angular 8 版本以后，在开发模式下使用 IE 需要添加一些配置。但是你已经找到了解决方案。 - Martin Choraine

是的，我们的开发版本运行得非常好...生产版本出了问题。很高兴找到了解决方案。再次感谢！ - Ed Meacham

我将在下周升级应用程序。希望问题不再存在。 - TAB