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

Question

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.

Solution 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

Solution 2

In polyfill.js add the below line:

import 'core-js/es7/array';

Solution 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

Comments

[Dylan Anlezark]

Why, what purpose does adding this serve?

[Jeremy Thille]

Worked in Angular 8 by replacing /es7/ with /es/

[Eccentropy]

@JeremyThille, changing /es7/ and /es6/ to /es/ also worked for me with Angular 9, thanks!

[Halfist]

@JeremyThille, /es/ didn't work for me in Angular 9, /es7/ did though.

[Mike Poole]

@AnandShendage the file is polyfill.ts rather than polyfill.js. You might wish to update the answer.