Object.assign() in IE11 with Angular2

Question

I know that this issue has been discussed a billion times, but it seems that none of the solutions I can find here are helping in my case.

This is what my polyfills.browser.ts looks like right now:

import 'ie-shim';
import 'core-js/es7/reflect';

import 'reflect-metadata';
import 'zone.js/dist/zone';

As stated before, I tried different approaches for solving this.

I tried adding all imports that are uncommented by default:

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

I tried using

import "core-js/client/shim";

and also

import 'mdn-polyfills/Object.assign';

and

import 'core-js';

All of these were added to the top of polyfills.browser.ts

None seems to help and I keep getting Object doesn't support property or method 'assign' in IE11.

I had a look at it before, but as I understood, I would need to actually use it whenever assign is needed, right? The call in question, however, is somewhere in one of the node modules used. — Davide De Santis
– Davide De Santis, Commented Oct 26, 2017 at 10:40

Estus Flask · Accepted Answer · 2017-10-26 12:12:45Z

3

Object.assign is ES2015 and is covered by a polyfill:

import 'core-js/es6/object';

Or for a broader range of ES2015 polyfills:

import 'core-js/es6';

The reason why it is preferable to list ES2015 polyfills in Angular application instead of importing core-js/es6 is that core-js/es6/promise polyfill is already covered by Zone.js and may cause problems,.

If this doesn't work and

Object doesn't support property or method 'assign'

error occurs, this means that polyfills bundle wasn't loaded in browser, or a piece of code where Object.assign occurs was evaluated before polyfills bundle was loaded.

edited Oct 26, 2017 at 12:12

answered Oct 26, 2017 at 11:26

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

3 Comments

Davide De Santis Over a year ago

I just added a console.log() to the polyfills file, and I get an output in my app, which means that it is loaded. How can I find out if something is evaluated before the bundle is loaded?

Estus Flask Over a year ago

Load it early in <head>. The way how the app is bundled depends on your setup. But of course, it's preferable for polyfills to be a separate bundle, because it should be loaded ASAP.

Davide De Santis Over a year ago

That was it, thanks! Had to make sure the order is correct in webpack :)

Daniel Kucal · Accepted Answer · 2018-01-10 22:52:40Z

0

I had the same issue even using polyfill on IE11, but not every time. The problem was that sometimes main script was being loaded before polyfills, so I've made the following change in webpack config:

       new CommonsChunkPlugin({
-        name: 'polyfills',
-        chunks: ['polyfills']
+        name: ['polyfills', 'main'].reverse(),
       })

So now with just:

new CommonsChunkPlugin({
  name: ['polyfills', 'main'].reverse(),
})

it seems to work properly

answered Jan 10, 2018 at 22:52

Daniel Kucal

9,3227 gold badges46 silver badges69 bronze badges

Collectives™ on Stack Overflow

Object.assign() in IE11 with Angular2

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related