Angular 2/4在IE11中不工作
我想弄清楚为什么我的angular2应用程序卡在显示加载…在IE 11中运行时。
在某人的build议下，我试过了这个笨蛋，在堆栈溢出的人上发布，在Chrome和IE 11上。在Chrome上工作正常，但在IE 11上失败。同样的错误，坚持说“正在加载…”
重击者是： 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无法运行angular2应用程序？
谢谢！
更新2017年
很多人都看过这个问题， @AshleyGrenon's答案是@AshleyGrenon's是最好的解决scheme。
angular （ 最近angular2 ）的最新版本是默认设置为常青树浏览器…
目前的设置是针对所谓的“常青树”浏览器; 自动更新自己的最新版本的浏览器。 这包括Safari> = 10，Chrome> = 55（包括Opera），桌面上的Edge> = 13以及移动设备上的iOS 10和Chrome。
这还包括Firefox，虽然没有提到。
有关浏览器支持的更多信息以及针对特定浏览器的build议填充列表，请参阅此处。 https://angular.io/docs/ts/latest/guide/browser-support.html
这意味着您必须手动启用正确的polyfills才能在IE11及更低版本中使用Angular。
为了达到这个目的，进入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';
请注意，该评论是从字面上的文件，所以这很容易find。
如果仍有问题，则可以@MikeDubbuild议的tsconfig.json将es5中的target属性降级到es5 。 这样做是将任何es6定义的编译输出更改为es5定义。 例如，胖箭头函数（ ()=>{} ）将被编译为匿名函数（ function(){} ）。 你可以在这里findes6支持的浏览器列表。
笔记
• @jackOfAll在评论中询问我是否加载IE11 @jackOfAll即使用户在不需要它们的常青树浏览器中。 答案是，他们是！ 包含IE11的polyfill将把你的~162KB文件从~162KB到~162KB 。 我已经试图解决这个问题，但目前看起来似乎不可能。
我今天遇到这个问题。 我在GitHub上find了一个解决scheme，不需要转到testing版的更高版本。
将以下脚本添加到您的html中：
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
这解决了我的问题。 有关更多详细信息，可以在此处查看github问题： https ： //github.com/angular/angular/issues/7144
这不是问题的完整答案（技术答案请参考@ Zze上面的答案 ），但是需要添加一个重要的步骤：
兼容模式
即使使用适当的polyfills，在IE11上使用polyfills仍然会运行Angular 2+应用程序。 如果您正在从Intranet主机运行站点（即，如果您正在使用http：// localhost或另一个映射的本地域名进行testing），则必须进入兼容性视图设置，并取消选中“在兼容性视图中显示Intranet站点”，因为IE11的兼容性视图打破了Angular的ES5 polyfills中包含的一些惯例。
截至2017年2月
使用Angular-Cli项目， polyfills.ts文件中的所有行都已被取消注释，所以所有的polyfills已经被使用。
我在这里find这个解决scheme来解决我的问题。
总结上面的链接， IE不支持 es6的 functionlambda箭头/胖箭头function 。 （ 这是如果polyfills.ts不适合你 ）。
解决scheme ：您需要定位es5才能在任何IE版本中运行，只有微软在新的Edge浏览器中才支持此function。
这在src/tsconfig.json下find：
"outDir": "../dist/out-tsc", "sourceMap": true, "target": "es5",
截至2017年9月（节点版本= v6.11.3，npm版本= 3.10.10），这是我工作的（谢谢@Zze）：
编辑polyfills.ts并取消注释IE11所需的导入。
更精确的说，编辑polyfills.ts （默认位于src文件夹中），只取消IE11所需的所有行注释（文件中的注释正确解释在IE11上运行所需的导入）。
一个小小的警告：注意classlist.js和web-animations-js注释时要注意。 这些注释行分别具有特定的注释：在注释它们或处理polyfills之前，必须运行关联的npm命令。
作为解释的一个词，polyfills是一些在Web浏览器上实现一个不支持它的function的代码。 这就是为什么在默认的polyfills.tsconfiguration中，只有一小部分导入是活动的（因为它的目标是所谓的“常青树”浏览器;自动更新自己的最新版本的浏览器 ）。
答案是现在使用2.0.0-beta.0。
