堆栈内存溢出
  繁体   English   中英

Angular 2 / 4 / 5 在 IE11 中不起作用

[英]Angular 2 / 4 / 5 not working in IE11

 原文  2016-02-01 21:30:51  2   22    angular/ typescript/ internet-explorer

问题描述

我想弄清楚为什么我的 angular 2 应用程序在 IE 11 中运行时卡在显示 Loading... 上。

根据某人的建议，我尝试了这个由堆栈溢出的人在 chrome 和 IE 11 上发布的 plunker。在 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 应用程序？

谢谢！

22 个解决方案

解决方案1
 190  2017-02-23 21:26:55

默认情况下，最新版本的angular仅为常绿浏览器设置...

当前设置适用于所谓的“常青”浏览器； 自动更新自己的最新版本的浏览器。 这包括 Safari >= 10、Chrome >= 55（包括 Opera）、桌面上的 Edge >= 13，以及移动设备上的 iOS 10 和 Chrome。
这也包括 firefox，虽然没有提到。

有关浏览器支持的更多信息以及针对特定浏览器的建议 polyfill 列表，请参见此处。 https://angular.io/guide/browser-support#polyfill-libs

这意味着您必须手动启用正确的 polyfills 才能让 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';

请注意，注释字面上在文件中，因此很容易找到。

如果您仍然有问题，你可以降级的target属性es5在tsconfig.json作为@MikeDub建议。 这样做是将任何es6定义的编译输出更改为es5定义。 例如，胖箭头函数 ( ()=>{} ) 将被编译为匿名函数 ( function(){} )。 您可以在此处找到 es6 支持的浏览器列表。

笔记

• 在@jackOfAll的评论中，我问我是否加载了 IE11 @jackOfAll即使用户使用的是不需要它们的常绿浏览器。 答案是，是的！ ~162KB 8 月 8 日，包含 IE11 polyfill 将使您的~162KB文件从~162KB到~258KB 。 我已经投资试图解决这个问题，但目前似乎不可能。

• 如果您在 IE10 及以下版本中遇到错误，请进入package.json并将webpack-dev-server降级到2.7.1 。 高于此的版本不再支持“较旧”的 IE 版本。

解决方案2
 23  2017-12-12 16:51:12

我遇到了完全相同的问题，但没有一个解决方案对我有用。 而是在<head>下的 (homepage).html 中添加以下行来修复它。

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

解决方案3
 19  2016-02-18 15:48:51

我今天遇到了这个问题。 我在 GitHub 上找到了一个解决方案，不需要转到更高版本的测试版。

将以下脚本添加到您的 html：

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

这为我解决了问题。 有关更多详细信息，您可以在此处关注 github 问题： https : //github.com/angular/angular/issues/7144

解决方案4
 12  2017-02-24 01:45:52

截至 2017 年 2 月

使用Angular-Cli项目， polyfills.ts文件中的所有行都已取消注释，因此所有 polyfill 都已被使用。

我在这里找到了这个解决方案来解决我的问题。

总结一下上面的链接， IE 不支持es6 的一个特性lambda 箭头 / 胖箭头函数。 （这是如果 polyfills.ts 不适合你）。

解决方案：您需要针对es5才能在任何 IE 版本中运行，仅在 Microsoft 的新 Edge 浏览器中引入了对此的支持。

这是在src/tsconfig.json下找到的：

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",

解决方案5
 11  2018-01-19 11:53:57

您需要通过取消注释适当的部分来为您的目标浏览器调整 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';

解决方案6
 10  2018-05-18 10:22:31

对于 iexplorer 11 和 Angular 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';

解决方案7
 10  2019-01-28 10:49:50

  1. 取消注释 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 软件包 注意注释中有一些 npm install 命令。 如果您使用的是早期版本的 Angular CLI，可能还有第三个版本。 对于 Angular CLI 版本 7、6 和 1.7，您需要运行：

npm install --save classlist.js

npm install --save web-animations-js

现在打开 IE 并呈现您的应用程序并检查:)

解决方案8
 9  2017-10-06 17:09:08

编辑 2018/05/15 ：这可以通过元标记来实现； 请将该标签添加到您的 index.html 并忽略这篇文章。

这不是问题的完整答案（有关技术答案，请参阅上面@Zze 的答案），但需要添加一个重要步骤：

兼容模式

即使有适当的 polyfills，在 IE11 上使用 polyfills 运行 Angular 2+ 应用程序仍然存在问题。 如果您在 Intranet 主机上运行站点（即，如果您在http://localhost或其他映射的本地域名上测试它），您必须进入兼容性视图设置并取消选中“在兼容性视图中显示 Intranet 站点”，因为 IE11 的兼容性视图打破了 Angular 的 ES5 polyfills 中包含的一些约定。

在此处输入图片说明

解决方案9
 8  2017-09-20 12:19:35

截至 2017 年 9 月（节点版本=v6.11.3，npm 版本=3.10.10），这对我有用（感谢@Zze）：

编辑polyfills.ts并取消注释 IE11 所需的导入。

更准确地说，编辑polyfills.ts （默认位于src文件夹中）并取消注释 IE11 所需的所有行（文件中的注释准确解释了在 IE11 上运行所需的导入）。

一个小警告：取消注释classlist.js和web-animations-js classlist.js要注意。 这些注释行都有一个特定的注释：您必须在取消注释之前运行相关的 npm 命令，否则 polyfills.ts 的处理将中断。

作为解释的话，polyfills 是在不支持它的 Web 浏览器上实现功能的代码片段。 这就是为什么在默认的 polyfills.ts 配置中只有最小的导入集是活动的（因为它的目标是所谓的“常青”浏览器；自动更新自己的浏览器的最新版本）。

解决方案10
 6  2019-01-20 14:50:58

我有一个 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 个步骤将解决您的问题，如果有任何问题，请告诉我。 谢谢！！！

解决方案11
 5  2018-10-11 12:20:51

如果您仍然遇到并非所有 JavaScript 函数都能正常工作的问题，请在您的 polyfills 中添加这一行。 它修复了缺失的“值”方法：

import 'core-js/es7/object';

这一行修复了缺失的“包含”方法：

import 'core-js/es7/array'

解决方案12
 4  2018-06-18 19:26:41

我遇到了同样的问题，如果您在兼容性视图中启用了显示 Intranet 站点，则 polyfills.ts 将不起作用，您仍然需要按照说明添加以下行。

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

解决方案13
 3  2018-09-07 19:41:35

改变tsconfig.json

"target":"es5",

解决了我的问题

解决方案14
 2  2018-05-22 11:01:06

对我有用的是我按照以下步骤来提高我在 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';

解决方案15
 2  2018-06-06 19:45:51

在 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`.

解决方案16
 2  2018-11-12 08:39:43

如果其他解决方案都不适合您，则值得调查问题的根源。 可能是 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，问题解决。

解决方案17
 2  2019-11-01 16:48:22

如何在 Angular8 中解决这个问题

import 'classlist.js';取消注释import 'classlist.js'; 并import 'web-animations-js'; 然后使用npm install --save classlist.js和npm install --save web-animations-js安装两个依赖项。

用"target":"es5",更新tsconfig.json "target":"es5",

然后ng serve运行应用程序并在 IE 中打开，它将起作用

解决方案18
 1  2019-12-31 08:36:44

  1. 取消 src/polyfill.js 中 IE 部分的注释，

    /** IE10 和 IE11 对 SVG 元素的 NgClass 支持需要以下内容*/

    导入'classlist.js';

  2. 如果丢失的包有任何构建错误，

    npm install classlist.js --save-exact

  3. 确保包含以下行以设置默认的 IE 文档模式。 否则它将在第 7 版中打开

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

解决方案19
 1  2020-09-14 09:45:43

第 1 步：取消注释 polyfills.ts 中的 plyfills。 同时运行 polyfills.ts 文件中提到的所有 npm install 命令来安装这些包

第 2 步：在 browserslist 文件中删除提到 IE 9-11 支持的行之前

第 3 步：在 tsconfig.json 文件中将“target”：“es2015”更改为“target”：“es5”

这些步骤解决了我的问题

解决方案20
 0  2019-02-01 16:10:11

我尝试了这个线程中的所有解决方案以及其他解决方案中的一堆，但没有成功。 最终为我解决这个问题的是更新我项目中的每个包，包括主要版本更改。 所以：

  1. 运行 npm 过时
  2. 使用结果中当前列中显示的数字更新 package.json（这可能会破坏您的项目，请小心）
  3. 运行 npm 安装
  4. 确保我也没有注释其他答案中提到的 polyfill。

就是这样。 我希望我能查明哪个图书馆是罪魁祸首。 我得到的实际错误是 Angular 6 中 vendor.js 中的“语法错误”。

解决方案21
 0  2020-05-18 13:39:50

开箱即用的 Angular 9 现在应该可以在 IE11 中正常工作。

我尝试了这里列出的所有建议，但没有一个奏效。 但是我确实设法将其跟踪到我在app.module中导入的特定库（ ZXingScannerModule是ZXingScannerModule ）。 如果您的应用程序在第一页上的 IE11 中失败，请尝试一次删除一个库并检查 IE11 - 在我的所有构建警告错误中完全错过了它。 如果您确实发现是这种情况，请考虑将您的站点区域划分为使用该库作为延迟加载模块的区域。

解决方案22
 0  2020-09-11 17:16:37

最新版本的 core-js lib 提供了不同路径的 polyfill。 所以在 polyfills.js 中使用以下内容。 并将target更改为es5中的tsconfig.base.json

/** 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';

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular 4在IE11中不起作用 Angular 4应用程序无法在IE11和Edge上运行 Angular 4 Observable在IE11中不起作用 IE11上的Angular 4动画无法正常工作 Angular Firestore 身份验证在 IE11 上不起作用 Angular2在IE11上不起作用 即使使用 polyfill，Angular 8 也无法在 IE11 中工作 Bootstrap/Angular 下拉菜单在 IE11 中不起作用 Angular - 材料组件在 IE11 中不起作用 Angular应用程序在IE11中不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM