69

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

Improve this question
1
  • 1
    @samuel-liew can you please review my question and close it. I feel it does not need any new answers. Commented May 7, 2018 at 14:29

11 Answers 11

Reset to default
99

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

This blog post seems to confirm this answer.
@spoida - how does the polyfills file work? If I uncomment it, is it only going to use the polyfill for the old browsers and resort to using the standard way for ever green browsers? Or will it only use polyfill from now on?
@Diskdrive - typically the polyfill will inspect the browser's implementation and only add things if the implementation is incomplete. So, yes, if the browser already supports the feature then the polyfill's implementation won't be used.
@spoida - thanks but if that is the case and it's only used when the browser needs it, why is it commented out by default?
@Diskdrive - I suspect that is because there is a small overhead associated with checking if a feature is supported rather than just assuming it's implemented and calling it directly. So if you're not targeting IE, by default Angular won't introduce that small overhead. If you do need to target IE, then other supported browsers will take a slight performance hit but they will still use their native implementations rather than a JavaScript equivalent. IE, on the other hand, will rely on the JavaScript implementation which could be orders of magnitude slower than native implementations.
|
28

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";
Improve this answer

3 Comments

mate, your answer would get more votes if you mentioned that these lines are in src/polyfills.ts. Thank you anyway, helped me to solve the problem!
VS2017 doesn't have a polyfills file, so I added the code in the boot app ts file...worked well...thanks
In the new VS2017 SPA templates just need to add the core-js line to boot.server.ts and boot.browser.ts
22

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

Improve this answer

1 Comment

I totally agree with you. I am new to angular 4, although i was working with angularjs before, still couldn't find the solution and couldn't guess what has gone wrong here. But thanks this worked better for me than the other one.
21

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

Improve this answer

5 Comments

The other answer, dealing with core-js is the easiest answer as angular already depends on core-js and won't bring in another dependency.
@AndrewLandsverk Is that new? It used to depend on a collection of other polyfills. Most angular 2 starter kits core-js, but it is not required as far as I know.
@AluanHaddad I do not believe it is new and I was pretty certain it was required (if not directly, than as a transitive dependency of angular itself).
@AndrewLandsverk thank you. You are indeed correct. It is directly listed as a dependency.
I am getting same error in IE and Safari, I uncomment the relevant lines in polyfill.js after this it working on IE but safari still showing same error. please suggest how to resolve this in safari.
10

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. **/

Improve this answer

1 Comment

could not find the polyfills.ts
6

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';
Improve this answer

4 Comments

Thank you! Also, this set of pollyfills is very similar to the ones found in this example: github.com/johnpapa/one-with-angular/blob/master/src/…
Also, I just noticed that the example I linked to is apparently included with a fresh install from Angular-CLI (mine is 1.0.3). You just have to uncomment the lines.
yes. you correct. you can uncomment some line at polyfills file. with angular-cli
@YoavSchniederman I am getting same issue in IE and Safari , I uncomment the relevant lines in polyfill.js after this it working on IE but safari still showing same error.please suggest how to resolve this in safari.
5

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

Improve this answer

Comments

4

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.

Improve this answer

1 Comment

none of the other solutions worked for me but this one worked, thanks. But I have enabled polyfills and installed the packages.
3

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';
Improve this answer

Comments

2

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.

Improve this answer

2 Comments

Full V1 has this with valuable commenting so you know how to use it too!
I really don't see what value this answer adds beyond the answers which already existed when it was posted.
1

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.