本文转自:https://stackoverflow.com/questions/35140718/angular-2-4-5-not-working-in-ie11/47777695#47777695

The latest version of angular is only setup for evergreen browsers by default...

The current setup is for so-called "evergreen" browsers; the last versions of browsers that automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 
This also includes firefox, although not mentioned.

See here for more information on browser support along with a list of suggested polyfills for specific browsers. https://angular.io/guide/browser-support#polyfill-libs


This means that you manually have to enable the correct polyfills to get Angular working in IE11 and below.


To achieve this, go into polyfills.ts (in the src folder by default) and just uncomment the following imports:

  1. /***************************************************************************************************
  2. * BROWSER POLYFILLS
  3. */
  4. /** IE9, IE10 and IE11 requires all of the following polyfills. **/
  5. import 'core-js/es6/symbol';
  6. import 'core-js/es6/object';
  7. import 'core-js/es6/function';
  8. import 'core-js/es6/parse-int';
  9. import 'core-js/es6/parse-float';
  10. import 'core-js/es6/number';
  11. import 'core-js/es6/math';
  12. import 'core-js/es6/string';
  13. import 'core-js/es6/date';
  14. import 'core-js/es6/array';
  15. import 'core-js/es6/regexp';
  16. import 'core-js/es6/map';
  17. import 'core-js/es6/set';

Note that the comment is literally in the file, so this is easy to find.

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.

For me with iexplorer 11 and Angular 2 I fixed all those above issues by doing 2 things:

in index.html add:

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

in src\polyfills.ts uncomment:

  1. /** IE9, IE10 and IE11 requires all of the following polyfills. **/
  2. import 'core-js/es6/symbol';
  3. import 'core-js/es6/object';
  4. import 'core-js/es6/function';
  5. import 'core-js/es6/parse-int';
  6. import 'core-js/es6/parse-float';
  7. import 'core-js/es6/number';
  8. import 'core-js/es6/math';
  9. import 'core-js/es6/string';
  10. import 'core-js/es6/date';
  11. import 'core-js/es6/array';
  12. import 'core-js/es6/regexp';
  13. import 'core-js/es6/map';
  14. import 'core-js/es6/weak-map';
  15. import 'core-js/es6/set';
  16. https://angular.io/guide/quickstart

[转]Angular 2 / 4 / 5 not working in IE11的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  3. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  4. angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...

  5. div实现自适应高度的textarea,实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  6. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  7. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  8. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  9. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

随机推荐

  1. fortran77读写文本文档

    PROGRAM WRITETEXT IMPLICIT NONE INTEGER,PARAMETER :: NE=!fortran90 语法定义变量 DOUBLE PRECISION A(,),B(,) ...

  2. SPI通信协议(非原创,转载他人,用于学习)

    SPI通信协议:1.SPI主从模式:2.数据信号的相位与极性:3.数据帧的格式. 一.什么是SPI? SPI是串行外设接口(Serial Peripheral Interface)的缩写.是 Moto ...

  3. Runtime之实例总结

    通过前面几篇对Runtime的讲解,本篇汇总一下Runtime实际中常用的一些场景. 1.获取类的基本信息 获取类名: const char *className = class_getName(cl ...

  4. ArcEngine不同种类的工作空间建立查询ICursor时“超出系统资源”

    环境 这里我的工作空间有两种:mdb库和SDE库分别打开的工作空间. 查询语句:使用Field in ('1','2')查询方式来得到游标对象. 错误 当查询语句中in后面的条件值大于1500时,在I ...

  5. cant found Microsoft.VSSDK.BuildTools.15.0.26201

    如果在vs扩展开发中出现 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 Failed to load 'C:\程序\EncodingNormalior\packages\Microsoft. ...

  6. 2月第3周业务风控关注|上海网信办复测23个被约谈APP 涉及1号店、小红书等

    易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全.移动安全.业务安全和网络安全,帮助企业提高警惕,规避这些似小实大.影响业务健康发展的安全风险. 1.上海网信办复测23个被约谈A ...

  7. create-react-app创建的项目npm run build之后静态文件找不到

    create-react-app创建的项目npm run build之后,运行build中的index.html,什么都没显示,打开浏览器的F12,发现了几个红色的报错,提示几个文件找不到. 查看生成 ...

  8. CentOS防火墙配置

    1.查询防火墙状态 service iptables status 2.开启防火墙 service iptables start 3.关闭防火墙 service iptables stop 4.重启防 ...

  9. Java学习笔记31(集合框架五:set接口、哈希表的介绍)

    set接口的特点: 1.不包含重复元素 2.set集合没有索引,只能用迭代器或增强for循环遍历 3.set的底层是map集合 方法和Collection的方法基本一样 set接口的实现类HashSe ...

  10. Appium同时连接多台手机进行测试(多线程)

    作为测试小白,当时遇到了N多问题: 开启多线程后,发现app启动后,用例就停止了:且启动app对应的手机不能正确对应,用例中是A手机跑A用例,结果启动了B手机跑A用例报错. 主要原因:Appium S ...