Error in Angular2: Internet Explorer 11 is having trouble accessing the property 'apply' because it is either undefined or null

Question

Error in Angular2: Internet Explorer 11 is having trouble accessing the property 'apply' because it is either undefined or null

After upgrading my angular2 packages to the latest versions, I encountered the following error:

@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

https://i.sstatic.net/xE5EY.png

This error only occurs in IE11, while it works fine in Chrome.

Investigating further, the error seems to be triggered in the angular/common module:

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

The corresponding typescript file:

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

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

The combine function is called in the code snippet at @angular/common/src/pipes/intl.ts line 48:

'yMMMdjms': datePartGetterFactory(combine([

UPDATE

Upon further investigation, it appears that the issue lies in the fact that the .assign method is not supported in IE11

javascript angular typescript

Answer 1

Answer №1

If you are using @angular/cli and aiming to cater to IE9-11, you have the option to adjust the src/polyfills.ts file to activate the necessary polyfills. These essential polyfills are already present in the file, simply waiting to be uncommented.

By default, @angular/cli projects are configured to target "evergreen" browsers, which automatically excludes support for IE. However, you can easily enhance your project by incorporating polyfills for the specific features required for IE compatibility.

Answer 2

If you are using @angular/cli and aiming to cater to IE9-11, you have the option to adjust the src/polyfills.ts file to activate the necessary polyfills. These essential polyfills are already present in the file, simply waiting to be uncommented.

By default, @angular/cli projects are configured to target "evergreen" browsers, which automatically excludes support for IE. However, you can easily enhance your project by incorporating polyfills for the specific features required for IE compatibility.

Answer 3

Answer №2

One of the dependencies of Angular is core-js. This allows you to utilize polyfills for Object.assign from it:

import "core-js/client/shim"; // Alternatively, make sure to load it before other angular2 & zone.js components
import "zone.js";
import "reflect-metadata";

Answer 4

One of the dependencies of Angular is core-js. This allows you to utilize polyfills for Object.assign from it:

import "core-js/client/shim"; // Alternatively, make sure to load it before other angular2 & zone.js components
import "zone.js";
import "reflect-metadata";

Answer 5

Answer №3

It's frustrating how the Angular Materials tutorial fails to address this issue. If you're using IE11 and following their tutorial, you'll definitely encounter this problem.

As others have pointed out, the solution is to simply uncomment those lines in your project's polyfills.ts file.

https://i.sstatic.net/wEIu2.png

However, it really should have been addressed in their tutorial.

I'm wasting too many hours searching on Google for solutions to these Angular issues...

Answer 6

It's frustrating how the Angular Materials tutorial fails to address this issue. If you're using IE11 and following their tutorial, you'll definitely encounter this problem.

As others have pointed out, the solution is to simply uncomment those lines in your project's polyfills.ts file.

https://i.sstatic.net/wEIu2.png

However, it really should have been addressed in their tutorial.

I'm wasting too many hours searching on Google for solutions to these Angular issues...

Answer 7

Answer №4

MDN's documentation on the compatibility of Object.assign() states that IE does not support it.

To address this, you can add the Object.assign polyfill from MDN using npm. (mdn-polyfills)

Installation: npm i mdn-polyfills --save

Usage:

import 'mdn-polyfills/Object.assign';

Answer 8

MDN's documentation on the compatibility of Object.assign() states that IE does not support it.

To address this, you can add the Object.assign polyfill from MDN using npm. (mdn-polyfills)

Installation: npm i mdn-polyfills --save

Usage:

import 'mdn-polyfills/Object.assign';

Answer 9

Answer №5

How to Enable Compatibility with Internet Explorer Browser

First Step: Install:npm i mdn-polyfills --save

Second Step: Access polyfills.ts

Third Step: Uncomment the necessary imports in the file located under /** Polyfills required for IE9, IE10, and IE11 **/

Answer 10

How to Enable Compatibility with Internet Explorer Browser

First Step: Install:npm i mdn-polyfills --save

Second Step: Access polyfills.ts

Third Step: Uncomment the necessary imports in the file located under /** Polyfills required for IE9, IE10, and IE11 **/

Answer 11

Answer №6

To enhance your polyfills.ts file, include the following:

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

Answer 12

To enhance your polyfills.ts file, include the following:

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

Answer 13

Answer №7

If you encounter the aforementioned error while working with a dotnet core 2.0 Angular template in IE, here is how I managed to resolve it.

Start by installing core-js

Run npm install core-js --save
Next, include this line at the top of ClientApp/boot.browser.ts

Import 'core-js/client/shim';

Answer 14

If you encounter the aforementioned error while working with a dotnet core 2.0 Angular template in IE, here is how I managed to resolve it.

Start by installing core-js

Run npm install core-js --save
Next, include this line at the top of ClientApp/boot.browser.ts

Import 'core-js/client/shim';

Answer 15

Answer №8

If you encounter an error while using angular 4.x, the solution outlined in https://example.com/solution may be helpful.

It appears that there is a known issue with version 0.8.8 of "zone.js". However, reverting back to version 0.8.4 seems to have resolved the issue. Visit the provided link for more information.

Answer 16

If you encounter an error while using angular 4.x, the solution outlined in https://example.com/solution may be helpful.

It appears that there is a known issue with version 0.8.8 of "zone.js". However, reverting back to version 0.8.4 seems to have resolved the issue. Visit the provided link for more information.

Answer 17

Answer №9

Solution for 'apply' error in Angular 4 when using IE11 No. 1 : Navigate to app/boot-browser-ts No. 2 : Insert the following line

import 'core-js/client/shim';

Answer 18

Solution for 'apply' error in Angular 4 when using IE11 No. 1 : Navigate to app/boot-browser-ts No. 2 : Insert the following line

import 'core-js/client/shim';

Answer 19

Answer №10

angular-cli version 1.0.0-rc.0 includes a file named polyfills.ts where all necessary polyfills for various browsers can be uncommented. I found that it worked seamlessly for me in IE-11 without any additional installations.

Answer 20

angular-cli version 1.0.0-rc.0 includes a file named polyfills.ts where all necessary polyfills for various browsers can be uncommented. I found that it worked seamlessly for me in IE-11 without any additional installations.

Answer 21

Answer №11

After carefully considering Stas Berkov's input, I found a unique approach to solving the issue:

In the header section where I include all Angular scripts, I made sure to add shim.js. This file is essential for the correct functioning of the application (especially after bundling and minifying during deployment). It's worth noting that shim.js must be loaded before zone.js to avoid encountering 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>

Answer 22

After carefully considering Stas Berkov's input, I found a unique approach to solving the issue:

In the header section where I include all Angular scripts, I made sure to add shim.js. This file is essential for the correct functioning of the application (especially after bundling and minifying during deployment). It's worth noting that shim.js must be loaded before zone.js to avoid encountering 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>

Error in Angular2: Internet Explorer 11 is having trouble accessing the property 'apply' because it is either undefined or null

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Similar questions

Ways to activate flashlight on mobile using React.Js

Setting up @cypress/code-coverage with Angular and TypeScript: A comprehensive guide

JavaScript - Returning an object using a promise

Using Javascript/React to filter an array by a specific value

Ways to check the functionality of the secondary tier in the api.send method

Triggering the click event three times on a dynamically generated element

Assign the textbox's value to be the earliest selected date from the datepicker

React-Bootstrap Table Toolkit Encounter Search Import Issue

How to deactivate a text box within a form that is dynamically generated using Angular

Utilizing ng-repeat, ng-grid, and ng-click in Angular: A comprehensive guide

Tips for managing the visibility of raised errors in Firebase functions

Import files from local directory to iframe in Electron application

How can I make sure the page scrolls to the top when navigating from one component to another in Angular 4 (now 5)?

What is the proper method for running a script using the Selenium JavascriptExecutor?

I have encountered limitations with useFormik where it does not accept null values for initialValues, even while utilizing a validationSchema

ui-grid-draggable-rows mistakenly identifies my data as a simple string

"Exploring the capabilities of Rxjs ReplaySubject and its usage with the

Implementing a delete functionality within a loop on a JavaScript object array

Upgrade your project from Angular 5 to Angular 9 using webpack

Tips for repairing texture distortion on rounded corner surfaces in the three.js library