Using Object.assign() in Internet Explorer 11 while working with Angular 2

Question

Using Object.assign() in Internet Explorer 11 while working with Angular 2

Despite the countless discussions on this issue, I have not found a solution that works for me.

This is the current content of my polyfills.browser.ts file:

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

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

I have tried various methods to resolve this problem.

Firstly, I attempted adding all default uncommented imports:

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

Additionally, I experimented with:

import "core-js/client/shim";

and also tried:

import 'mdn-polyfills/Object.assign';

as well as

import 'core-js';

All these imports were added at the beginning of polyfills.browser.ts

Unfortunately, none of them resolved the issue and I continue to encounter the error message stating Object doesn't support property or method 'assign' in IE11.

javascript angular typescript internet-explorer-11 polyfills

Answer 1

Answer №1

Object.assign was introduced in ES2015 and can be implemented using a polyfill:

import 'core-js/es6/object';

For a wider coverage of ES2015 polyfills, you can use:

import 'core-js/es6';

The reason why it's recommended to specify ES2015 polyfills in an Angular application instead of just importing core-js/es6 is that the core-js/es6/promise polyfill is already included in Zone.js and could potentially cause issues.

If you encounter an

Object doesn't support property or method 'assign'

error message, it indicates that the polyfills bundle wasn't loaded in the browser, or the piece of code containing Object.assign was executed before the polyfills bundle finished loading.

Answer 2

Object.assign was introduced in ES2015 and can be implemented using a polyfill:

import 'core-js/es6/object';

For a wider coverage of ES2015 polyfills, you can use:

import 'core-js/es6';

The reason why it's recommended to specify ES2015 polyfills in an Angular application instead of just importing core-js/es6 is that the core-js/es6/promise polyfill is already included in Zone.js and could potentially cause issues.

If you encounter an

Object doesn't support property or method 'assign'

error message, it indicates that the polyfills bundle wasn't loaded in the browser, or the piece of code containing Object.assign was executed before the polyfills bundle finished loading.

Answer 3

Answer №2

I encountered a similar issue while using a polyfill on IE11, although not consistently. The problem occurred when the main script was loaded before the polyfills sometimes. To address this, I made a modification to the webpack configuration:

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

By making this change, now simply:

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

it appears to be functioning correctly.

Answer 4

I encountered a similar issue while using a polyfill on IE11, although not consistently. The problem occurred when the main script was loaded before the polyfills sometimes. To address this, I made a modification to the webpack configuration:

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

By making this change, now simply:

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

it appears to be functioning correctly.

Using Object.assign() in Internet Explorer 11 while working with Angular 2

Answer №1

Answer №2

Similar questions

Combining data using D3's bar grouping feature

Creating distinct web addresses for various sections of vue.js pagination

"Step-by-step guide on associating JSON data with <li> elements using AngularJS

Experience interactive 3D model viewer in action

Utilizing AngularJS: Employing the $q Promise Feature to Await Data Readiness in this Scenario

Why won't setInterval function properly with innerHTML?

Tips on adjusting the width of columns in a Google chart?

p-menu fails to appear

Using CSS on a randomly selected div that is chosen after dividing the main div each time it is clicked

Creating Angular Components Dynamically through API Requests

Full width divider for Ionic 2 lists

Is there a Node template engine similar to EJS that seamlessly integrates with HTML templates?

Conceal the HTML input element until the JavaScript has finished loading

What is the proper way to incorporate an if statement within a new instance?

In search of a new object value to update

What could be causing IdentityServer 4 code flow to intermittently receive an invalid_grant response?

Trouble with populating Ext.grid.Panel from ExtJS4 JSON data

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

What is the best way to use a JavaScript function as a callback?

The `react-hover` npm package functions flawlessly in the development environment despite being excluded from the production build