Angular 2/4/5在IE11中不起作用 [英] Angular 2 / 4 / 5 not working in IE11
问题描述
我试图弄清楚为什么我的angular 2应用在IE 11中运行时仍无法显示正在加载...".
I am trying to figure out why my angular 2 app is stuck on showing Loading... when running in IE 11.
根据某人的建议，我尝试了某人在Chrome和IE 11上在堆栈溢出时发布的此插件，在Chrome和IE 11上均可正常运行，但在IE 11上无法正常运行.相同的错误，停留在说正在加载... "
Following someone's suggestion, I've tried this plunker, posted by someone on stack overflow, on both chrome and IE 11. Works fine on Chrome, but fails on IE 11. Same error, stuck on saying "Loading..."
pl是: https://plnkr.co/edit/6zVFbrH5yohwc714gBbb?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应用程序吗?
Anybody got any idea as to why IE 11 fails to run the angular 2 app?
谢谢！
推荐答案
The latest version of angular is only setup for evergreen browsers by default...
当前设置适用于所谓的常绿"浏览器；自动更新自身的浏览器的最新版本.这包括Safari> = 10，Chrome> = 55(包括Opera)，Edge> = 13(在桌面上)以及iOS 10和Chrome在移动设备上.
这也包括firefox，尽管未提及.
请参阅此处，以获取有关浏览器支持的更多信息以及针对特定浏览器的建议填充列表. https://angular.io/guide/browser-support#polyfill-libs
这意味着您必须手动手动启用正确的polyfill，才能在IE11及更低版本中使用Angular.
This means that you manually have to enable the correct polyfills to get Angular working in IE11 and below.
要实现此目的，请进入polyfills.ts(默认情况下位于src文件夹中)，然后取消注释以下导入:
To achieve this, go into polyfills.ts (in the src folder by default) and just uncomment the following imports:
/***************************************************************************************************
* 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';
请注意，注释实际上位于文件中，因此很容易找到.
Note that the comment is literally in the file, so this is easy to find.
如果仍然有问题，可以将target属性在tsconfig.json中降级为es5，作为 @MikeDub 建议.这是将任何es6定义的编译输出更改为es5定义.例如，粗箭头功能(()=>{})将被编译为匿名功能(function(){}).您可以在此处找到列表.
If you are still having issues, you can downgrade the target property to es5 in tsconfig.json as @MikeDub suggested. What this does is change the compilation output of any es6 definitions to es5 definitions. For example, fat arrow functions (()=>{}) will be compiled to anonymous functions (function(){}). You can find a list of es6 supported browsers here.
•@jackOfAll在评论中询问我是否加载了IE11 polyfills，即使用户使用的是常绿浏览器，也不需要它们.答案是，是的！包括IE11的polyfill文件，将从17年8月8日开始将您的polyfill文件从~162KB移到~258KB.我已经投资尝试解决此问题，但是目前看来还不可能.
• I was asked in the comments by @jackOfAll whether IE11 polyfills are loaded even if the user is in an evergreen browser which doesn't need them. The answer is, yes they are! The inclusion of the IE11 polyfills will take your polyfill file from ~162KB to ~258KB as of Aug 8 '17. I have invested in trying to solve this however it does not seem possible at this time.
•如果在IE10及以下版本中遇到错误，请进入package.json，然后将webpack-dev-server降级为2.7.1.高于此版本的版本不再支持旧" IE版本.
• If you are getting errors in IE10 and below, go into you package.json and downgrade webpack-dev-server to 2.7.1 specifically. Versions higher than this no longer support "older" IE versions.
这篇关于Angular 2/4/5在IE11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
