Angular 4.0.0 App built by angular-cli 1.0.0 not working in IE11

Question

I try to run my virgin Angular 4 Application built by the angular-cli 1.0.0 in the Internet Explorer 11, but I have no success and I get the following error:

Error: The "apply" property of an undefined or null reference can not be retrieved.

I have no additional library installed, it is just a new generated project. In Google Chrome it is working perfectly. My package.json:

{
"name": "angi4testie",
"version": "0.0.0",
"license": "MIT",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"private": true,
"dependencies": {
  "@angular/common": "^4.0.0",
  "@angular/compiler": "^4.0.0",
  "@angular/core": "^4.0.0",
  "@angular/forms": "^4.0.0",
  "@angular/http": "^4.0.0",
  "@angular/platform-browser": "^4.0.0",
  "@angular/platform-browser-dynamic": "^4.0.0",
  "@angular/router": "^4.0.0",
  "core-js": "^2.4.1",
  "rxjs": "^5.1.0",
  "zone.js": "^0.8.4"
},
"devDependencies": {
  "@angular/cli": "1.0.0",
  "@angular/compiler-cli": "^4.0.0",
  "@types/jasmine": "2.5.38",
  "@types/node": "~6.0.60",
  "codelyzer": "~2.0.0",
  "jasmine-core": "~2.5.2",
  "jasmine-spec-reporter": "~3.2.0",
  "karma": "~1.4.1",
  "karma-chrome-launcher": "~2.0.0",
  "karma-cli": "~1.0.1",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "karma-coverage-istanbul-reporter": "^0.2.0",
  "protractor": "~5.1.0",
  "ts-node": "~2.0.0",
  "tslint": "~4.5.0",
  "typescript": "~2.2.0"
}
}

Solution 1

Angular-CLI includes a file in the src/ directory called pollyfills.ts.

 * 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/es7/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/set';
import 'core-js/es7/array';

Uncomment all of the IE polyfills in that file and things should work swimmingly.

Solution 2

There is a need for a ES6 polyfill for IE 11. So you have to add a script tag for that required polyfill in order for your app to run on IE11.

See the docs for guidance on browser support.

Comments

[Philipp Januskovecz]

Thank you @snorpete! :) I have installed core-js, but where I have to add the line require('core-js')?

[DGomez]

If you check the docs, you'll see that core-js is so 'core' that you need to add it as a script tag in your index.html rather than import it

[DGomez]

glad to help :)

[IroNEDR]

@snorkpete Where in the docs did you see that you need to add it as a script tag? I did that and am still having the same error on IE11.

[DGomez]

did you look at the link in the comment? that page shows that you have to include the script tag for the core-js library. then, check the src/polyfills.ts file and ensure that you uncomment the polyfills needed for the browsers you want to support

[Anthony]

I imported import 'core-js/client/shim'; To align with what is in the angular documentation. Is that simply all those imports minified?

[Jolleyboy]

I'm not sure, but if it's working, that's all you need, right?

[Anthony]

Yup, just validated that importing 'core-js/client/shim' works for the error stated in the original post. I wonder if other things will bubble up as I build the app out. Those might require additional imports.

[KCarnaille]

THANKS <3 You saved me

[Jolleyboy]

@KCarnaille, glad to help :)

[Surendranath Sonawane]

Thank you this works. polyfills file have contains this configuration only problem is it was commented, I just uncomment it and it running on IE