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

[suuuunto]

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.

1. App was created with angular-cli beta 24, github example on https://github.com/suuuunto/includes-example

2. Component has an function includes() and the result goes to console.

3. For ng build, tsconfig.json had to be adjusted to "es7" for "lib", with "es6" a build error occurs

4. Open page with IE 11 on Win 8.1 an error occurs in console:
   EXCEPTION: Object doesn't support property or method 'includes'

5. 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]

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]

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]

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]

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]

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

[tolgabalci]

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

[snibbo]

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

[rotatopoti]

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]

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]

why are these not uncommented, to begin with?

[adamdport]

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]

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.
• 2. 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]

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

[sgentile]

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

ie.

zloirock/core-js#412

[hpawe01]

@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]

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

[hpawe01]

@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]

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

no need for es6/ + es7/

[changhuixu]

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

[angular-automatic-lock-bot]

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