Angular-cli: No IE11 Support Even AFTER Including Polyfills

[TaylorZaneKirk]

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.

1. ng serve
2. 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';

[TaylorZaneKirk]

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]

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 https://github.com/angular/angular-cli/issues/4128

[nachocoig]

i needed to add

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

Thanks @kwa !!

[bradd-pandey]

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

[jacqremo]

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]

You need to set tsconfig.json compilerOptions :

1. "target": "es5"
2. "lib": [
   "es7",
   "dom"
   ]

It solved 'includes' issue for me.

[harishrajanna]

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

[AnkushChaudhary517]

me too 👎

[Koslun]

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]

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]

Anyone found the solution for angular 4 applications ?

[mustafakachwala]

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

[weber-d]

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]

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

[BBaysinger]

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]

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]

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]

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

[BBaysinger]

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]

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]

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]

@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]

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[bot]]

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