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

Question

我正在 angular8 中构建一个应用程序。我在 angular5/6/7 上工作，对于这些应用程序，我取消了 polyfills.ts 中存在的导入的注释。对于 Angular 8，它只有 3 个导入，即 classlist.js、web-animation-js 和 zone.js/dist/zone。我的应用程序在 IE 中运行良好。但是我开始使用包含函数来查看一个项目是否存在。它在 chrome 中运行良好。在 IE 中它会抛出 Object does not support property or method 'includes' 错误。

Answer 1

在polyfill.js添加以下行：

import 'core-js/es7/array';

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";

• 角度文档：https ://angular.io/guide/browser-support
• Polyfill 库：https ://github.com/zloirock/core-js
  • 查看CommonJS API有关添加 polyfill 的其他方法的部分

Answer 3

includes是一个存在于 IE 上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的 polyfill

Answer 4

caniuse 提示 Includes 功能不可用。

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

但是，以下内容可能会有所帮助。

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

治愈

要让 IE 正常工作，我们需要执行以下两个步骤：

取消注释 polyfill.ts 文件中的一些导入。安装几个 npm 包。Polyfill Imports 首先在 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 Success 现在在项目的根目录中运行：

在http://localhost:4200服务点 Internet Explorer，您将看到您的应用程序正在运行。