Angular 8：对象不支持“包含”属性或方法

Question

我正在使用Angular8开发一个应用程序。我之前用过Angular5/6/7，对于这些应用程序，我会将polyfills.ts中存在的导入语句注释去掉。但是对于Angular8，它只有3个导入语句，即classlist.js、web-animation-js和zone.js/dist/zone。我的应用在IE浏览器中可以正常工作。但是我开始使用includes函数来查看项是否存在。在Chrome浏览器中它可以正常工作，但在IE浏览器中会抛出“Object doesn't support property or method 'includes'”错误。

- indra257

---

可能是重复的问题，参考链接：ie does not support 'includes' method。 - Ahmad Alfy

Answer 1

在 polyfill.js 中添加以下代码：

import 'core-js/es7/array';

- ANAND SHENDAGE

---

为什么要添加这个？它有什么作用？ - Dylan Anlezark

通过将 /es7/ 替换为 /es/，在 Angular 8 中进行了工作。 - Jeremy Thille

@JeremyThille，将 /es7/ 和 /es6/ 改为 /es/ 对我在 Angular 9 中也起作用了，谢谢！ - Eccentropy

@JeremyThille，/es/在Angular 9中对我无效，但/es7/有效。 - Halfist

@AnandShendage，该文件名为polyfill.ts而非polyfill.js。您可能需要更新答案。 - Mike Poole

Answer 2

关于Angular 8+，它们默认添加了差异化加载；现代浏览器（如Chrome和FF）将加载一个es2015兼容的JS文件，而旧版浏览器（如IE11）将加载一个相同但兼容es5的JS文件。

为了将polyfills插入到您的es5文件中（以便被IE11加载），您需要将它们手动添加到src/polyfills.ts文件中。

// Only load the 'includes' polyfill
import 'core-js/features/array/includes';

或者您可以添加所有的polyfill：

// polyfill all `core-js` features:
import "core-js";

• Angular 文档：https://angular.cn/guide/browser-support
• Polyfill 库：https://github.com/zloirock/core-js
  • 请查看 CommonJS API 部分以了解其他添加 polyfills 的方法

- Elte156

Answer 3

“includes”是一个存在于Array.prototype和String.prototype上的函数，在IE浏览器上不受支持。您需要使用以下类似的polyfill：

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}

或者对于数组也是类似的。您还可以检查Core.js是否需要填充。

- Ahmad Alfy

Answer 4

caniuse网站显示，Includes函数不可用。

https://caniuse.com/#search=includes

然而以下内容可能会有所帮助。

摘自这篇文章：https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9

解决方法 要让IE正常工作，我们基本上需要执行两个步骤：

1. 在polyfill.ts文件中取消注释一些导入语句。 2. 安装一些npm包。

取消Polyfill导入

首先在IDE或文本编辑器中打开文件：ie-test\src\polyfills.ts

取消所有导入行的注释。对我来说，最简单的方法就是用import替换所有的// import。

然后我的文件看起来像这样：

安装npm包

请注意，注释中有一些npm install命令。如果您使用的是早期版本的Angular CLI，则可能还有第三个命令。对于Angular CLI版本7、6和1.7，您需要运行以下命令：

npm install --save classlist.js npm install --save web-animations-js

成功

现在，在项目的根目录中运行以下命令：

ng serve 将Internet Explorer指向：http://localhost:4200，您将看到应用程序正在工作。

- jmdon