Angular 8: Object doesn't support property or method 'includes'

问题

I am building an application in angular8. I worked on angular5/6/7 and for those applications, I uncommented the imports that exist in the polyfills.ts. For angular 8, it has only 3 imports i.e classlist.js, web-animation-js and zone.js/dist/zone. My application is working fine in IE. But I started using the includes function to see if an item exists. It works fine in chrome. In IE it throws Object doesn't support property or method 'includes' error.

回答1:

includes is a function that exist on Array.prototype and String.prototype and it is not supported on IE. You need to use a polyfill like the following:

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

Or similar for Arrays. You can also check Core.js for polyfills

回答2:

In polyfill.js add the below line:

import 'core-js/es7/array';

回答3:

With respect to Angular 8+, they added differential loading by default; where modern browsers (like Chrome and FF) will load an es2015 compatible JS file and legacy browsers (like IE11) will load another but same functioning es5 JS file.

In order to get polyfills into your es5 file (to be loaded by IE11), you need to add them manually to the src/polyfills.ts file.

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

Or you can just add all polyfills:

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

Angular Docs: https://angular.io/guide/browser-support
Polyfill Libs: https://github.com/zloirock/core-js
- Check out the CommonJS API section on the other ways to add polyfills

回答4:

caniuse suggests the Includes function is not available.

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

However the below could help.

Taken from this article: https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9

The Cure

To get IE working there are basically two steps we need to do:

Un-comment some imports in the polyfill.ts file. Install a couple of npm packages. Polyfill Imports First open the file in your IDE or text editor: ie-test\src\polyfills.ts

Un-comment all the import lines in there. For me, the easy way is just to replace all // import with import

After that mine looks like this:

Install npm Pacakages Notice there are some npm install commands in the comments. If you are using an early version of Angular CLI, there may also be a third one. For Angular CLI versions 7, 6, and 1.7 you need to run:

npm install --save classlist.js npm install --save web-animations-js Success Now in the root of your project just run:

ng serve Point Internet Explorer at: http://localhost:4200 and you will see your application working.

来源：https://stackoverflow.com/questions/57365371/angular-8-object-doesnt-support-property-or-method-includes

标签

angular

angular8

angular-cli-v8