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