Internet Explorer 11 - Object doesn't support property or method 'includes'

Question

I'm getting this error in IE 11, on all other common browsers it works fine.

I use this code which makes use of 'includes':

const keys = Object.keys(this.service.content);

            if (keys.includes(splitUrl[splitUrl.length - 1])) {
                this.router.navigateByUrl(`/mysite/${splitUrl[splitUrl.length - 1]}/1`);
            }

Any alternatives?

Solution 1

I was Face same Problem with Angular 7.0+ and IE11

I got solution by adding one line to my polyfill.ts file.

import 'core-js/es7/array';

I get this solution from this article Internet Explorer 11 and Angular 2+

NB: If you want to avoid this kind of situation for IE browser then you should read this article Thanks to Maarten Merken.

Solution 2

If anyone is looking for ReactJS solution -

Used import 'core-js/es6/string'; at the start of index.js to solve my problem.

I'm also using import 'react-app-polyfill/ie11'; to support running React in IE11.

react-app-polyfill

This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by Create React App projects.

https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

Solution 3

If you are using angular/cli, open up polyfills.ts file and uncomment the required polyfill.

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

You might also want to include other polyfills required by IE11.

Solution 4

You should use either a polyfill for Array.prototype.includes or old good Array.prototype.indexOf

 if (keys.indexOf(splitUrl[splitUrl.length - 1]) !== -1) {
   this.router.navigateByUrl(`/mysite/${splitUrl[splitUrl.length - 1]}/1`);
 }

View more solutions

Comments

[bobdolan]

hmmm indexof doesn't give me the same results strangely... but it's definitely helping me getting in the right direction

[uladzimir]

@bobdolan what do you mean by "same results"? could you please provide an example?

[bobdolan]

What I'm doing in my code is I compare an object (type: string) with the splitted URL. If the splitted URL contains the string it redirects the user to another section.

[Yuri Kiriachek]

Thanks, indexOf worked like a charm. It's a pity in a way though that for the support of relict browsers one needs to spend time and effort...

[uladzimir]

@YuriKiriachek usual advice here is to support IE first, all other browsers will just work ;)