Polyfills for IE11 not working, for example .includes() #4128

suuuunto · 2017-01-20T10:49:19Z

Please provide us with the following information:

OS?

Windows 8, 10. Linux (Ubuntu15.10). Mac OSX ( El Capitan)

Versions.

angular-cli: 1.0.0-beta.24
node: 5.12.0
os: linux x64
@angular/common: 2.4.4
@angular/compiler: 2.4.4
@angular/core: 2.4.4
@angular/forms: 2.4.4
@angular/http: 2.4.4
@angular/platform-browser: 2.4.4
@angular/platform-browser-dynamic: 2.4.4
@angular/router: 3.4.4
@angular/compiler-cli: 2.4.4

Repro steps.

App was created with angular-cli beta 24, github example on https://github.com/suuuunto/includes-example
Component has an function includes() and the result goes to console.
For ng build, tsconfig.json had to be adjusted to "es7" for "lib", with "es6" a build error occurs
Open page with IE 11 on Win 8.1 an error occurs in console:
EXCEPTION: Object doesn't support property or method 'includes'
Imo core-js polyfills should solve that.

The log given by the failure.

EXCEPTION: Object doesn't support property or method 'includes'

Thanks, suuuunto

clydin · 2017-01-20T10:58:23Z

See here: https://github.com/zloirock/core-js#ecmascript-7-proposals
You need to add the appropriate import(s) to polyfills.ts. Only those required by Angular and the base generated project are included by default.

suuuunto · 2017-01-20T11:44:55Z

Ok, I though the function includes belongs the es6 string. But obviously I am working with an array ... and the array includes is es7.

I added "import 'core-js/es7/array';" to polyfills.ts --> works perfect!

Thanks a lot!

tolgabalci · 2017-04-06T15:38:27Z

Go to your polyfills.ts and find the import statements commented out under the section:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/

Uncomment these to have your app working with these IE browsers.

rupeshtiwari · 2017-05-18T15:32:07Z

Thanks @tolgabalci I uncommented the IE related imports line from polyfills.ts file. I think one more point is we have to install couple of npm packages mentioned on polyfill.ts file. I overlooked them and it was not working. Then I had to go install classlist.js and web-animations-js etc.. npm packages.
//import 'classlist.js'; // Run npm install --save classlist.js.
//import 'web-animations-js'; // Run npm install --save web-animations-js. so on..

phani257 · 2017-05-24T21:18:49Z

I dont see polyfill.ts getting created along with the app.

tolgabalci · 2017-05-24T22:03:16Z

@phani257 polyfills.ts is created under the src folder.

snibbo · 2017-06-22T07:53:56Z

I got the same issue. Thanks for the solution.
Can anyone explain why the import statements are commented out by default?

rotatopoti · 2017-09-11T17:48:13Z

Is it possible to choose these polyfills when running the cli instead of needing to come back to remove the comments? Let's say I know that all of the sites that I generate will need to be run in I.E. .....

hawkwind2 · 2017-10-13T00:10:30Z

I have polyfills.js but can't find polyfills.ts...
Ok. I added it manually and referenced (don't have CLI with angular on that proj)

matthewswallace · 2017-10-16T19:11:32Z

why are these not uncommented, to begin with?

adamdport · 2017-10-23T17:19:19Z

If anyone else tries @suuuunto's es7 fix and gets Exception thrown and not caught errors, I learned that you should add the es7 import, not replace the es6 one. That is, don't remove the es6 import! You should end up with

import 'core-js/es6/array';
import 'core-js/es7/array';

sgentile · 2018-08-31T17:23:31Z

I still get this error - not sure why this is closed:

SCRIPT5022: SecurityError
polyfills.js (7422,25)

`/**

This file includes polyfills needed by Angular and is loaded before the app.
You can add your own extra polyfills to this file.
This file is divided into 2 sections:
1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
1. Application imports. Files imported after ZoneJS that should be loaded before your main
```
 file.
```
The current setup is for so-called "evergreen" browsers; the last versions of browsers that
automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/

/***************************************************************************************************

BROWSER POLYFILLS
*/

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

/** Issue with IE and FormData **/
import 'formdata-polyfill';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run npm install --save classlist.js.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/** need for 'includes' etc... **/
//#4128
import 'core-js/es7/array';

/**

Required to support Web Animations @angular/platform-browser/animations.
Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run npm install --save web-animations-js.

/**

By default, zone.js will patch all possible macroTask and DomEvents
user can disable parts of macroTask/DomEvents patch by setting following flags
*/

// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

/*

in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
with the following flag, it will bypass zone.js patch for IE/Edge
*/
//(window as any).__Zone_enable_cross_context_check = true;

/*

in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
with the following flag, it will bypass zone.js patch for IE/Edge
*/
//(window as any).__Zone_enable_cross_context_check = true;

//https://github.com/angular/zone.js/issues/933 Added only for IE and Edge
if (document['documentMode'] || /Edge/.test(navigator.userAgent)) {
(window as any).__Zone_enable_cross_context_check = true;
}

/***************************************************************************************************

Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.

/***************************************************************************************************

APPLICATION IMPORTS
*/

`

etonyali · 2018-10-09T17:20:32Z

Don't forget to add this as well.
index.html
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

sgentile · 2019-06-17T17:38:44Z

This is still broken, core-js has changed and object.freeze throws errors.

ie.

zloirock/core-js#412

hpawe01 · 2019-08-09T11:34:39Z

@etonyali: you don't need to add this meta tag (X-UA-Compatible) anymore (for most cases): https://stackoverflow.com/questions/26346917/why-use-x-ua-compatible-ie-edge-anymore

Exception: "you're hosting a site in the Local Intranet zone" or for local development (as @etonyali pointed out)

etonyali · 2019-08-09T11:49:48Z

@hpawe01 if you are developing locally, you should add it. Please review the link you posted.

hpawe01 · 2019-08-09T12:10:24Z

@etonyali: fair enough. It sounded like an edge case and I didn't thought, that you also need it for local development. Updated my comment.

Yohandah · 2019-08-14T12:58:17Z

this is working for me just doing so :
import "core-js/es/array";

no need for es6/ + es7/

changhuixu · 2019-08-14T13:22:35Z

you can further break down to just doing:
import 'core-js/modules/es.array.includes';

angular-automatic-lock-bot · 2019-09-14T08:02:34Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

suuuunto closed this as completed Jan 20, 2017

marjan-georgiev mentioned this issue Jun 28, 2017

Library does not function properly on IE11 swimlane/ngx-charts#459

Closed

cipchk mentioned this issue Sep 20, 2017

can you support IE11 ng-alain/ng-alain#17

Closed

ghost mentioned this issue Oct 12, 2017

some charttypes throw TypeErrors on old WebView (30.0.0.0) swimlane/ngx-charts#529

Closed

GuiF007 mentioned this issue Jan 5, 2018

includes() javascript function does not work on Internet Explorer jhipster/generator-jhipster#6953

Closed

1 task

kwa mentioned this issue Jan 17, 2018

No IE11 Support Even AFTER Including Polyfills #7776

Closed

nachocoig mentioned this issue Jan 18, 2018

Angular project problems running on IE11 jhipster/generator-jhipster#7001

Closed

1 task

ddimaria mentioned this issue Feb 11, 2018

Project in Angular 5 not working in IE11 #9578

Closed

adamkleingit mentioned this issue Mar 14, 2018

IE11 doesn't work - polyfill error CirclonGroup/angular-tree-component#567

Closed

amarnathm mentioned this issue Aug 9, 2018

Some pages are blank with IE 11 logsense/dsps-forms-issues#1

Closed

fetters5 mentioned this issue Feb 8, 2019

es5BrowserSupport add additional polyfill #13622

Closed

GMDuncan mentioned this issue Jun 14, 2019

Complex filters jncc/web-mapper-core#37

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Polyfills for IE11 not working, for example .includes() #4128

Polyfills for IE11 not working, for example .includes() #4128

suuuunto commented Jan 20, 2017

Please provide us with the following information:

clydin commented Jan 20, 2017 •

edited

Loading

suuuunto commented Jan 20, 2017

tolgabalci commented Apr 6, 2017

rupeshtiwari commented May 18, 2017

phani257 commented May 24, 2017

tolgabalci commented May 24, 2017

snibbo commented Jun 22, 2017

rotatopoti commented Sep 11, 2017 •

edited

Loading

hawkwind2 commented Oct 13, 2017 •

edited

Loading

matthewswallace commented Oct 16, 2017

adamdport commented Oct 23, 2017

sgentile commented Aug 31, 2018

etonyali commented Oct 9, 2018

sgentile commented Jun 17, 2019

hpawe01 commented Aug 9, 2019 •

edited

Loading

etonyali commented Aug 9, 2019

hpawe01 commented Aug 9, 2019

Yohandah commented Aug 14, 2019

changhuixu commented Aug 14, 2019

angular-automatic-lock-bot bot commented Sep 14, 2019

Polyfills for IE11 not working, for example .includes() #4128

Polyfills for IE11 not working, for example .includes() #4128

Comments

suuuunto commented Jan 20, 2017

Please provide us with the following information:

OS?

Versions.

Repro steps.

The log given by the failure.

clydin commented Jan 20, 2017 • edited Loading

suuuunto commented Jan 20, 2017

tolgabalci commented Apr 6, 2017

rupeshtiwari commented May 18, 2017

phani257 commented May 24, 2017

tolgabalci commented May 24, 2017

snibbo commented Jun 22, 2017

rotatopoti commented Sep 11, 2017 • edited Loading

hawkwind2 commented Oct 13, 2017 • edited Loading

matthewswallace commented Oct 16, 2017

adamdport commented Oct 23, 2017

sgentile commented Aug 31, 2018

etonyali commented Oct 9, 2018

sgentile commented Jun 17, 2019

hpawe01 commented Aug 9, 2019 • edited Loading

etonyali commented Aug 9, 2019

hpawe01 commented Aug 9, 2019

Yohandah commented Aug 14, 2019

changhuixu commented Aug 14, 2019

angular-automatic-lock-bot bot commented Sep 14, 2019

clydin commented Jan 20, 2017 •

edited

Loading

rotatopoti commented Sep 11, 2017 •

edited

Loading

hawkwind2 commented Oct 13, 2017 •

edited

Loading

hpawe01 commented Aug 9, 2019 •

edited

Loading