Angular 2 / 4 / 5 在 IE11 中不起作用
Posted
技术标签:
【中文标题】Angular 2 / 4 / 5 在 IE11 中不起作用【英文标题】：Angular 2 / 4 / 5 not working in IE11 【发布时间】：2016-05-10 12:07:50 【问题描述】：我试图弄清楚为什么我的 Angular 2 应用程序在 IE 11 中运行时卡在显示 Loading...。
根据某人的建议，我尝试了这个 plunker，由某人在 chrome 和 IE 11 上的堆栈溢出上发布。在 Chrome 上工作正常，但在 IE 11 上失败。同样的错误，坚持说“正在加载... "
plunker 是： https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Router Sample</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
<script>
System.config(
transpiler: 'typescript',
typescriptOptions: emitDecoratorMetadata: true ,
packages: 'src': defaultExtension: 'ts'
);
System.import('src/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
有人知道为什么 IE 11 无法运行 Angular 2 应用程序吗？
谢谢！
【问题讨论】：
答案是暂时使用 2.0.0-beta.0。 【参考方案1】：第 1 步：取消注释 polyfills.ts 中的 plyfills。同时运行 polyfills.ts 文件中提到的所有 npm install 命令来安装这些包
第 2 步：在 browserslist 文件中，不要在提及 IE 9-11 支持的行之前删除
第 3 步：在 tsconfig.json 文件中将“target”：“es2015”更改为“target”：“es5”
这些步骤解决了我的问题
【讨论】：
【参考方案2】：最新版本的 core-js lib 提供了不同路径的 polyfill。所以在 polyfills.js 中使用以下内容。并将tsconfig.base.json中的target值更改为es5
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
import 'core-js/es/object';
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/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
【讨论】：
【参考方案3】：开箱即用的 Angular 9 现在在 IE11 中应该可以正常工作了。
我尝试了此处列出的所有建议，但都没有奏效。但是，我确实设法将其追踪到我在app.module 中导入的特定库（准确地说是ZXingScannerModule）。如果您的应用在第一页的 IE11 中失败，请尝试一次删除一个库并签入 IE11 - 我的所有构建警告错误都完全错过了它。如果您确实发现是这种情况，请考虑划分您的站点区域，该区域使用此库作为延迟加载模块。
【讨论】：
【参考方案4】：在 src/polyfill.js 中取消注释 IE 部分，
/** IE10 和 IE11 需要以下对 SVG 元素的 NgClass 支持*/
导入'classlist.js';
如果缺少包的任何构建错误，那么，
npm install classlist.js --save-exact
确保包含以下行以设置默认的 IE 文档模式。否则它将在版本 7 中打开
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
【讨论】：
【参考方案5】：如何在 Angular8 中解决这个问题
polyfills.ts 取消注释 import 'classlist.js'; 和 import 'web-animations-js'; 然后使用 npm install --save classlist.js 和 npm install --save web-animations-js 安装两个依赖项。
用"target":"es5",更新tsconfig.json
然后ng serve运行应用程序并在IE中打开，它会工作
【讨论】：
【参考方案6】：我尝试了该线程中的所有解决方案以及其他解决方案，但均未成功。最终为我解决这个问题的是更新我项目中的每个包，包括主要版本更改。所以：
-
运行 npm 已过期
使用结果中当前列中显示的数字更新 package.json（这可能会破坏您的项目，请小心）
运行 npm install
确保我还取消了其他答案中所述的 polyfill 注释。
就是这样。我希望我能查明哪个图书馆是罪魁祸首。我得到的实际错误是 Angular 6 中 vendor.js 中的“语法错误”。
【讨论】：
【参考方案7】：-
取消注释 polyfill.ts 文件中的某些导入。
/** 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';安装 npm 包 注意 cmets 中有一些 npm install 命令。如果您使用的是 Angular CLI 的早期版本，则可能还有第三个版本。对于 Angular CLI 版本 7、6 和 1.7，您需要运行：
npm install --save classlist.js
npm install --save web-animations-js
现在打开 IE 并渲染您的应用程序并检查 :)
【讨论】：
【参考方案8】：我有一个 Angular4 应用程序，即使对我来说，它也不能在 IE11 浏览器中工作，我已经完成了以下更改，现在它可以正常工作了。 只需在 index.html 文件中添加以下代码
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
您只需从 polyfills.ts 文件中取消注释以下几行
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';
以上 2 个步骤将解决您的问题，如果有任何问题，请告诉我。谢谢！！！
【讨论】：
我已经把这 2 部分注释掉了但是还是不行，你有别的解决办法吗【参考方案9】：如果其他解决方案都不适合您，则值得调查问题的根源。可能比npm模块直接插入ES6代码，无法转译。
在我的情况下，我有
SCRIPT1002: 语法错误 vendor.js (114536,27) 在以下行：
const ucs2encode = array => String.fromCodePoint(...array);
我搜索了 node_modules 文件夹，发现该行来自哪个文件。原来罪魁祸首是punycode.js，在它的 2.1.0 版本中直接使用了 ES6。
我降级到1.4.1后，使用ES5，问题就解决了。
【讨论】：
非常感谢您的回复。虽然它没有解决问题，但它帮助我找到了麻烦制造者模块并将问题告知它的作者。【参考方案10】：如果您仍然遇到并非所有 javascript 函数都能正常工作的问题，请在您的 polyfill 中添加这一行。它修复了缺失的“值”方法：
import 'core-js/es7/object';
这一行修复了缺失的“包含”方法：
import 'core-js/es7/array'
【讨论】：
【参考方案11】：改变tsconfig.json
"target":"es5",
解决了我的问题
【讨论】：
【参考方案12】：最新版angular默认只为常青浏览器设置...
当前设置适用于所谓的“常青”浏览器；自动更新自己的浏览器的最新版本。这包括 Safari >= 10、Chrome >= 55（包括 Opera）、Edge >= 13（桌面版）以及 ios 10 和 Chrome（移动版）。 这也包括 firefox，虽然没有提到。
有关浏览器支持的更多信息以及针对特定浏览器的建议 polyfill 列表，请参见此处。 https://angular.io/guide/browser-support#polyfill-libs
这意味着您必须手动启用正确的 polyfill 才能让 Angular 在 IE11 及更低版本中工作。
为此，请进入polyfills.ts（默认在src 文件夹中）并取消注释以下导入：
/***************************************************************************************************
* BROWSER 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/set';
请注意，注释是在文件中的字面意思，所以很容易找到。
如果您仍然遇到问题，您可以按照@MikeDub 的建议将tsconfig.json 中的target 属性降级为es5。这样做是将任何es6 定义的编译输出更改为es5 定义。例如，粗箭头函数 (()=>) 将被编译为匿名函数 (function())。可以找到支持 es6 的浏览器列表here。
注意事项
• 我在 cmets 中被@jackOfAll 询问是否加载了 IE11 polyfill，即使用户在不需要它们的常青浏览器中也是如此。答案是，是的！自 2017 年 8 月 8 日起，包含 IE11 polyfill 将使您的 polyfill 文件从 ~162KB 变为 ~258KB。我已投资尝试解决此问题，但目前似乎不可能。
• 如果您在 IE10 及更低版本中遇到错误，请进入 package.json 并将 webpack-dev-server 降级为 2.7.1。高于此的版本不再支持“旧”IE 版本。
【讨论】：
我的 Angular 5 项目也有同样的错误，即使我取消了 IE 的 polyfill 的注释，仍然无法在 IE 浏览器中工作。太奇怪了…… 取消注释所有提到的导入以及下面的导入 NgClass。最后安装“npm install --save classlist.js”。这在我的情况下有效。 @dudewad 我正在尝试创建 2 个单独的包，一个明确用于 IE11，然后将该包包装在 IE 条件注释中，这将阻止它在 chrome 中通过。 @Zze 好吧，这对你来说肯定是彻底的。不错，我喜欢。 @Zze 条件 cmets 已在 IE10 中删除，仅在 IE5-9 中受支持。所以你的 IE 包不会为 IE10+ 加载，除非你专门做了一些用户代理嗅探以在运行时将你的包添加到页面。【参考方案13】：我遇到了同样的问题，如果您在兼容性视图中启用了显示 Intranet 站点，polyfills.ts 将不起作用，您仍然需要按照说明添加以下行。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
【讨论】：
【参考方案14】：在 polyfills.ts 中
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/weak-set';
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`.
【讨论】：
【参考方案15】：对我有用的是我按照以下步骤来提高我在 IE 11 中的应用程序性能 1.) 在 Index.html 文件中，添加以下 CDN
<script src="https://npmcdn.com/angular2@2.0.0-
beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>
2.) 在 polyfills.ts 文件中添加以下导入：
import 'core-js/client/shim';
【讨论】：
【参考方案16】：对于使用 iexplorer 11 和 Angular 2 的我，我通过做 2 件事解决了上述所有问题：
在 index.html 中 添加：
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
在 src\polyfills.ts 取消注释：
/** 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';
【讨论】：
是的，这适用于 IE11，但不适用于 IE10：ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)【参考方案17】：
EDIT 2018/05/15：这可以通过meta tag 来实现；请将该标签添加到您的 index.html 并忽略此帖子。
这不是问题的完整答案（技术答案请参考@Zze's answer above），但有一个重要步骤需要添加：
兼容模式
即使有适当的 polyfill，在 IE11 上使用 polyfill 运行 Angular 2+ 应用程序仍然存在问题。如果您在 Intranet 主机上运行该站点（即，如果您在 http://localhost 或另一个映射的本地域名测试它），您必须进入兼容性视图设置并取消选中“在兼容性视图中显示 Intranet 站点”，因为 IE11 的兼容性视图打破了 Angular 的 ES5 polyfills 中包含的一些约定。
【讨论】：
如果您遵循此解决方案，您必须在运行您的应用程序的所有客户端上执行此操作。向您的 html 文件添加特殊标记会强制浏览器以可用的最新版本而不是兼容模式运行。参考以下答案找到标签：***.com/a/47777695/4628364 根据我的经验，如果您的应用在 Intranet 主机上提供服务，则使用此元标记不会覆盖 IE 11 的默认设置为“在兼容性视图中显示 Intranet 站点”。 Intranet 应用程序的用户仍然需要进入并手动取消选中这个不太理想的选项。我目前正在寻找一种解决方法 - 也许编译到 ES5 而不是 ES6。【参考方案18】：您需要针对您的目标浏览器调整 polyfills.ts 文件 通过取消注释相应的部分。
/** 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';
【讨论】：
这很棒。谢谢。【参考方案19】：我遇到了完全相同的问题，但没有一个解决方案对我有用。而是在 <head> 下的 (homepage).html 中添加以下行来修复它。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
【讨论】：
考虑到来自此 SO ***.com/questions/26346917/… 的信息，使用 X-UA-Compatible 的建议似乎无效。【参考方案20】：截至 2017 年 9 月（节点版本=v6.11.3，npm 版本=3.10.10），这对我有用（感谢@Zze）：
编辑 polyfills.ts 并取消注释 IE11 所需的导入。
更准确地说，编辑 polyfills.ts（默认位于 src 文件夹中）并取消注释 IE11 所需的所有行（文件中的 cmets 准确解释了在 IE11 上运行所需的导入）。
一个小警告：取消注释classlist.js 和web-animations-js 的行时请注意。这些注释行都有一个特定的注释：您必须在取消注释之前运行相关的 npm 命令，否则 polyfills.ts 的处理将中断。
作为解释，polyfills 是在不支持它的网络浏览器上实现功能的代码片段。 这就是为什么在默认的 polyfills.ts 配置中只有最小的导入集处于活动状态 （因为它的目标是所谓的“常青”浏览器；自动更新的浏览器的最新版本）。
【讨论】：
【参考方案21】：截至 2017 年 2 月
使用 Angular-Cli 项目，polyfills.ts 文件中的所有行都已取消注释，因此所有 polyfill 都已被使用。
我找到了这个解决方案 here 来解决我的问题。
总结上面的链接，IE 不支持 lambda 箭头/胖箭头函数，这是 es6 的一个特性。 （如果 polyfills.ts 不适合你）。
解决方案：您需要以 es5 为目标，它才能在任何 IE 版本中运行，对此的支持仅在 Microsoft 新的 Edge 浏览器中引入。
这可以在src/tsconfig.json：下找到：
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
【讨论】：
这个答案非常具有误导性。 polyfills 是使 IE 9 及更高版本与 ES6 标准兼容的脚本，如下所示：angular.io/docs/ts/latest/guide/browser-support.html 因此，浏览器是否原生支持箭头函数并不重要，polyfills 完全缓解了这个问题。 我的情况如何……误导？ polyfills 已经被取消注释并且它们没有解决我在 IE11 中遇到的问题。很难认为这值得投反对票。 重读这篇文章后，我明白你想说什么，但目前的措辞方式，听起来你必须手动更改所有.ts 文件，使其不再使用指向匿名函数的胖箭头。我认为，如果您更改 ecma 脚本目标，那么您应该从该链接中摘录一段关于编译器输出有何不同的引用，这将缓解该问题。
此外，我已经在我的 tsconfig 中针对 es5，但我仍然有问题。
@MikeDub 我尝试使用您的解决方案，但它不适用于 IE11。你能给我提供更好的方法吗？【参考方案22】：
我今天遇到了这个问题。我在 GitHub 上找到了一个不需要进入更高版本的 beta 的解决方案。
将以下脚本添加到您的 html：
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
这为我解决了问题。更多详情可以关注github issue：https://github.com/angular/angular/issues/7144
【讨论】：
这个解决方案对我不起作用 :( ... [在 IE 上运行的 VS2015 项目上]以上是关于Angular 2 / 4 / 5 在 IE11 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
IE11 上的 Webpack + Angular(4) + ES6 不起作用
无法使用 IE 11 和 Angular 4 在 ArcgisMap 上拖动