No IE11 Support Even AFTER Including Polyfills #7776

TaylorZaneKirk · 2017-09-21T17:31:22Z

Bug Report or Feature Request (mark with an `x`)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.2
node: 6.11.2
os: win32 x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

Repro steps.

ng serve
open in IE11

The log given by the failure.

SCRIPT1004: Expected ';'
vendor.bundle.js (49604,19)

SCRIPT5007: Unable to get property 'call' of undefined or null reference
bootstrap 9ae86f3cd76dd3b7dd8f (54,1)

(OR)

SCRIPT5007: Unable to get property 'call' of undefined or null reference
inline.bundle.js (55,12)

(Never both of the SCRIPT5007 errors at the same time. One or the other appears when I load the page or hit refresh)

Desired functionality.

Would like for it to work.

Mention any other details that might be useful.

I HAVE UNCOMMENTED THE LINES IN THE POLYFILL!!!!!!! PLEASE DO NOT SUGGEST THIS!!!!

Polyfills.ts:

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
import 'intl/locale-data/jsonp/en';

The text was updated successfully, but these errors were encountered:

TaylorZaneKirk · 2017-09-21T19:56:25Z

I found a fix.

Apparently, in one of my 3rd party components (ng2-smart-table to be exact) I had made modifications to the code in order to achieve something I required for my project. My guess is that for(variable of object){} loops aren't supported?

old code:

for(let p of this.previouslySelected){
            if(p.page == page.page){
                p.data = page.data;
                found = true;
            }
        }

fixed code:

this.previouslySelected.forEach(function(p){
            if(p.page == page.page){
                p.data = page.data;
                found = true;
            }
        });

For anyone reading this in the future with similar issues, check for things like this.

kwa · 2018-01-17T16:33:38Z

I added
import 'core-js/es7/array';
which solved the problem.

Given the polyfills.ts file I added it like this:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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/weak-map';
import 'core-js/es6/set';

import 'core-js/es7/array';

Also see #4128

nachocoig · 2018-01-18T08:48:17Z

i needed to add

import 'core-js/es6/array';
import 'core-js/es7/array';

Thanks @kwa !!

bradd-pandey · 2018-02-27T23:05:09Z

Even after adding import 'core-js/es7/array'; it's not helping out in Angular 4/5 apps.

jacqremo · 2018-03-01T15:58:09Z

I agree with @bpaans. I have an Angular 5 app and still getting an error

JavaScript runtime error: Object doesn't support property or method 'includes'

after adding import 'core-js/es7/array'. Has anyone found a solution for this?

ArtMuS91 · 2018-03-06T11:03:16Z

You need to set tsconfig.json compilerOptions :

"target": "es5"
"lib": [
"es7",
"dom"
]

It solved 'includes' issue for me.

harishrajanna · 2018-03-22T13:30:08Z

I am really pissed of same solution everyone is giving which is not working.....

AnkushChaudhary517 · 2018-03-27T10:44:53Z

me too 👎

Koslun · 2018-03-27T12:14:42Z

Using the above polyfills worked fine in IE11 for me.

@harishrajanna @AnkushChaudhary517 If it doesn't work for you a more detailed explanation about your build process, app structure, dependencies and error message is likely needed to get any meaningful help. There are a lot of things that could simply fail in IE11.

Might be more worth taking it up as a question in stackoverflow.

xMarkusSpringerx · 2018-03-27T15:47:11Z

I do have the same problem. I've set the target = "es5" and

        "lib": [
            "dom",
            "es6"
        ]

Still get SCRIPT5007: Object expected

I also added all polyfills + the import 'core-js/es7/array';

Hamza-324 · 2018-04-03T08:44:18Z

Anyone found the solution for angular 4 applications ?

mustafakachwala · 2018-04-08T18:02:04Z

Any resolutions for this, the above ones dont work for me?

weber-d · 2018-04-09T09:26:13Z

Same issue, the error occurs at the following line in function __webpack_require__(moduleId)

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

Tried all suggestions mentioned in this issue. Only cause trouble in IE11, where Firefox and Chrome works fine. In 2018 it's still a pain when you're forced to support IE...

mathiassamyn · 2018-04-10T13:35:15Z

Same issue as @weber-d, only in IE11 and event then not always... only after repeated reloads

BBaysinger · 2018-04-19T02:27:49Z

I'm having this issue, and none of the above fixes work.

https://stackoverflow.com/questions/49911435/angular-2-ie-11-unable-to-get-property-call-of-undefined-or-null-reference

jakehockey10 · 2018-04-20T19:33:27Z

I'm having this issue only after a live-reload occurs with the Developer Tools open. No issue with Chrome and Firefox, but if I have the Developer Tools open in IE11 and save a change to my typescript, nearly 100% of the time, I get these errors upon reload.

joshrouwhorst · 2018-04-20T20:35:34Z

Tried all of the above fixes and none work for me.

Seems to be coming from when
__webpack_require__("./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0"); gets called in main.bundle.js. This module is not in the modules[] array in inline.bundle.js. Seems like I get past this if I set breakpoints in the webpackJsonpCallback function and slowly walk through it. To me, that suggests there's a race condition that's not getting met normally. Tried different versions of @angular/cli, tried deleting node_modules and reinstalling. Banging my head against the wall on this. Really would appreciate any help. Thanks!

Edit: Did not see the comment above, which worked for me. It is unbelievable that IE's Developer Tools is actually causing this problem. Microsoft sure knows how to make a browser.

kuldipg · 2018-05-04T22:47:15Z

Anyone found the solution for angular 4 or 5 applications ? Thanks

BBaysinger · 2018-05-04T23:35:26Z

For the folks who are running into this, can I ask what your testing environment is? Have you tried running your apps in different environments, like different virtual machines, and physical machines? Have you made sure your IE 11 is the very latest?

I'm asking, because I found our app was actually running perfectly once I fired it up in VirtualBox, as opposed to our previous testing environment, which was SauceLabs. We do not have a physical device to test on, though I've asked for one several times.

BBaysinger · 2018-05-08T21:40:44Z

Angular 6 is in full release. Has anyone tried it to see if this issue persists? I've heard it uses a new major version of Webpack.

kubagurgul · 2018-06-12T15:18:10Z

I had same issue. Couldn't find solution anywhere so I decided to copy project piece by piece each time checking if it works on IE. Finally I found problem.
There was wrong import of ng2-logger.
import {Log} from "ng2-logger" instead of import {Log} from "ng2-logger/client";
This happened after angular and other libs version update.
Really frustrating, especially that misleading error. Took way to much effort and time to find this.

danday74 · 2018-06-12T21:21:12Z

@joshrouwhorst seems to be on the right track.

IE11 dying on this line:

modules[moduleId].call(module.exports, module, module.exports, webpack_require);
Where moduleId === ./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0

So I tried with live-reload disabled using:

ng serve --live-reload=false -o

That changed the problem to:

modules[moduleId].call(module.exports, module, module.exports, webpack_require);
Where moduleId === ./node_modules/@angular/core/esm5/core.js

But now I'm stuck and none of the solutions here works :(

FYI I determined moduleId by using breakpoints on the failing line

EDIT

2 solutions:

(1) upgrade to ng6 - this is a webpack issue, ng5 uses webpack 2, ng6 uses webpack 4, so the upgrade will prob fix it
(2) comment out large chunks of the codebase to get the app working in IE and then slowly restore the code to identify the problem. Doing this I got IE working with live reload. Sadly, our codebase is too big to do this effectively. I will try (1) first and if all else fails resort to this.

PS Can't give feedback on how my attempt went since I'm parking this for now.

marcocoelho · 2018-08-20T17:14:36Z

I was able to make it work in IE, Edge and Firefox. It was the problem.
I set up Pollyfill.

By placing 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 / weak-map';
import 'core-js / es6 / set';

import 'classlist.js';
import 'core-js / es6 / reflect';
import 'core-js / es7 / reflect';
import 'web-animations-js';
import 'zone.js / dist / zone';

what made it work on Edge and Firefox was by adding these two imports and installing via NPM.

APPLICATION IMPORTS
* /
import '@ webcomponents / custom-elements / src / native-shim';
import '@ webcomponents / custom-elements / custom-elements.min';

Final setup to work in IE was what the friend @ArtMuS91 .

angular-automatic-lock-bot · 2019-09-08T12:40:55Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

TaylorZaneKirk closed this as completed Sep 21, 2017

davutg mentioned this issue Feb 20, 2018

All Angular 2 apps broken in Internet Explorer 11 after beta.0 angular/angular#7144

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No IE11 Support Even AFTER Including Polyfills #7776

No IE11 Support Even AFTER Including Polyfills #7776

TaylorZaneKirk commented Sep 21, 2017 •

edited

Loading

TaylorZaneKirk commented Sep 21, 2017

kwa commented Jan 17, 2018 •

edited

Loading

nachocoig commented Jan 18, 2018

bradd-pandey commented Feb 27, 2018

jacqremo commented Mar 1, 2018

ArtMuS91 commented Mar 6, 2018

harishrajanna commented Mar 22, 2018

AnkushChaudhary517 commented Mar 27, 2018

Koslun commented Mar 27, 2018 •

edited

Loading

xMarkusSpringerx commented Mar 27, 2018 •

edited

Loading

Hamza-324 commented Apr 3, 2018

mustafakachwala commented Apr 8, 2018

weber-d commented Apr 9, 2018 •

edited

Loading

mathiassamyn commented Apr 10, 2018

BBaysinger commented Apr 19, 2018

jakehockey10 commented Apr 20, 2018

joshrouwhorst commented Apr 20, 2018 •

edited

Loading

kuldipg commented May 4, 2018

BBaysinger commented May 4, 2018 •

edited

Loading

BBaysinger commented May 8, 2018

kubagurgul commented Jun 12, 2018

danday74 commented Jun 12, 2018 •

edited

Loading

marcocoelho commented Aug 20, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

No IE11 Support Even AFTER Including Polyfills #7776

No IE11 Support Even AFTER Including Polyfills #7776

Comments

TaylorZaneKirk commented Sep 21, 2017 • edited Loading

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

TaylorZaneKirk commented Sep 21, 2017

kwa commented Jan 17, 2018 • edited Loading

nachocoig commented Jan 18, 2018

bradd-pandey commented Feb 27, 2018

jacqremo commented Mar 1, 2018

ArtMuS91 commented Mar 6, 2018

harishrajanna commented Mar 22, 2018

AnkushChaudhary517 commented Mar 27, 2018

Koslun commented Mar 27, 2018 • edited Loading

xMarkusSpringerx commented Mar 27, 2018 • edited Loading

Hamza-324 commented Apr 3, 2018

mustafakachwala commented Apr 8, 2018

weber-d commented Apr 9, 2018 • edited Loading

mathiassamyn commented Apr 10, 2018

BBaysinger commented Apr 19, 2018

jakehockey10 commented Apr 20, 2018

joshrouwhorst commented Apr 20, 2018 • edited Loading

kuldipg commented May 4, 2018

BBaysinger commented May 4, 2018 • edited Loading

BBaysinger commented May 8, 2018

kubagurgul commented Jun 12, 2018

danday74 commented Jun 12, 2018 • edited Loading

marcocoelho commented Aug 20, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

TaylorZaneKirk commented Sep 21, 2017 •

edited

Loading

Bug Report or Feature Request (mark with an `x`)

kwa commented Jan 17, 2018 •

edited

Loading

Koslun commented Mar 27, 2018 •

edited

Loading

xMarkusSpringerx commented Mar 27, 2018 •

edited

Loading

weber-d commented Apr 9, 2018 •

edited

Loading

joshrouwhorst commented Apr 20, 2018 •

edited

Loading

BBaysinger commented May 4, 2018 •

edited

Loading

danday74 commented Jun 12, 2018 •

edited

Loading