Angular2 IE11 Unable to get property 'apply' of undefined or null reference

JavascriptAngularTypescript

Javascript Problem Overview


I am getting the following error after upgrading my angular2 packages to the following versions:

  • @angular/common": "^2.3.1
  • @angular/compiler": "^2.3.1
  • @angular/core": "^2.3.1
  • @angular/forms": "^2.3.1
  • @angular/http": "^2.3.1
  • @angular/platform-browser": "^2.3.1"
  • @angular/platform-browser-dynamic": "^2.3.1
  • @angular/platform-server": "^2.3.1
  • @angular/router": "^3.3.1

Error: Unable to get property 'apply' of undefined or null reference

enter image description here

I am only getting this error in IE11, in Chrome it works fine.

I did some digging and the line that causes the error is in the angular/common module:

function combine(options) {
  return (_a = ((Object))).assign.apply(_a, [{}].concat(options));
  var _a;
}

The typescript file:

@angular/common/src/pipes/intl.ts line 175

function combine(options: Intl.DateTimeFormatOptions[]): Intl.DateTimeFormatOptions {
  return (<any>Object).assign({}, ...options);
}

The code that calls the combine function is @angular/common/src/pipes/intl.ts line 48:

'yMMMdjms': datePartGetterFactory(combine([


UPDATE

It seems that the actual error is that the .assign method is not implemented in IE11

Javascript Solutions


Solution 1 - Javascript

If you are using @angular/cli and intend to support IE9-11 you can edit the src/polyfills.ts file to enable appropriate polyfills. The required polyfills are already in the file so all you need to do is un-comment them.

By default @angular/cli projects target "evergreen" browsers out of the box which means that IE isn't immediately supported, but you can add support by importing polyfills for the features you need.

Solution 2 - Javascript

Angular has dependency on core-js. Thereby you can use Object.assign polyfills from it:

import "core-js/client/shim"; // or load it before other angular2 & zone.js stuff
import "zone.js";
import "reflect-metadata";

Solution 3 - Javascript

It's really annoying that the Angular Materials tutorial doesn't mention this problem. Anyone using IE11 and following their tutorial will hit this issue.

The solution, as others have mentioned, is to simply uncomment those lines in your project's polyfills.ts file.

enter image description here

But really, this should've been mentioned in their tutorial.

I'm spending far too many hours Googling to find solutions to these Angular problems...

Solution 4 - Javascript

According to MDN Object.assign() Browser compatibility IE is not supported.

You can import the Object.assign polyfill by MDN with npm. (mdn-polyfills)

Run: npm i mdn-polyfills --save

Use: import 'mdn-polyfills/Object.assign';

Solution 5 - Javascript

To Work in IE browser

Step 1:Run:npm i mdn-polyfills --save

Step 2: Open polyfills.ts

Step 3: UnComment the imports in the file under /** IE9, IE10 and IE11 requires all of the following polyfills. **/

Solution 6 - Javascript

at your polyfills.ts add:

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

Solution 7 - Javascript

if anyone got this error in a dotnet core 2.0 Angular template using IE, this is how I resolved it.

  1. install core-js

    npm install core-js --save

  2. Add this line at the top of ClientApp/boot.browser.ts

    import 'core-js/client/shim';

Solution 8 - Javascript

If you are using angular 4.x and come across this error then the solution described in https://github.com/angular/angular-cli/issues/6036 worked for me.

It seems like there is a bug with version 0.8.8 of "zone.js". However, downgrading back to version 0.8.4 resolved the issue. See the link for more details.

Solution 9 - Javascript

Angular 4 IE11 fix for unable to get property 'apply'

Step 1 : Open app/boot-browser-ts

Step 2 : add the below line

import 'core-js/client/shim'; 

Solution 10 - Javascript

It seems angular-cli(v1.0.0-rc.0) has file called polyfills.ts in which you have to un-comment all required polyfills for the browsers, It works good for me with zero installation in IE-11.

Solution 11 - Javascript

Stas Berkov is correct, and his answer led me to a slightly different solution:

In my header where I load all the Angular scripts I included shim.js. (I bundle/minified on deploy). Big note: it is critical that shim.js be loaded before zone.js, otherwise you get a different error.

<script src="/<my domain>/node_modules/core-js/client/shim.js"></script>
<script src="/<my domain>/node_modules/zone.js/dist/zone.js"></script>
<script src="/<my domain>/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/<my domain>/node_modules/systemjs/dist/system.src.js"></script>

<script src="/<my domain>/systemjs.config.js"></script>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTjaart van der WaltView Question on Stackoverflow
Solution 1 - JavascriptspoidaView Answer on Stackoverflow
Solution 2 - JavascriptStanislav BerkovView Answer on Stackoverflow
Solution 3 - JavascriptMike GledhillView Answer on Stackoverflow
Solution 4 - JavascriptAldracorView Answer on Stackoverflow
Solution 5 - JavascriptSreenath SView Answer on Stackoverflow
Solution 6 - JavascriptYoav SchniedermanView Answer on Stackoverflow
Solution 7 - JavascriptgavinView Answer on Stackoverflow
Solution 8 - JavascriptChetView Answer on Stackoverflow
Solution 9 - JavascriptSatendra JindalView Answer on Stackoverflow
Solution 10 - JavascriptSanthanamView Answer on Stackoverflow
Solution 11 - JavascriptMichaelView Answer on Stackoverflow