IE11 crash

[Sancho66]

Issue Type:

• Bug
  IE11 crash when I load an element-angular component.

Version & Environment:
IE11 , angular 5.0
All polyfills are imported for IE11 in polyfills.ts.

Description:
IE11 crash when I load an element-angular component. On Chrome browser it works but in our company we must use IE11...
When I comment in source code all element-angular dependencies , it works on IE11.

In IE inspector :

// "../../../../element-angular/release/element-angular.module.js":
// (function(module, webpack_exports, webpack_require) {

"use strict";
eval("Object.defineProperty(webpack_exports, "__esModule", { value: true });\n/* harmony export (binding) / webpack_require.d(webpack_exports, "ElModule", function() { return ElModule; });\n/ harmony import / var WEBPACK_IMPORTED_MODULE_0__angular_core = webpack_require("../../../core/esm5/core.js");\n/ harmony import / var WEBPACK_IMPORTED_MODULE_1__message_message_service = webpack_require("../../../../element-angular/release/message/message.service.js");\n/ harmony import / var WEBPACK_IMPORTED_MODULE_2__notification_notification_service = webpack_require("../../../../element-angular/release/notification/notification.service.js");\n/ harmony import / var WEBPACK_IMPORTED_MODULE_3__shared_module = webpack_require("../../../../element-angular/release/shared/module.js");\n/ harmony import / var WEBPACK_IMPORTED_MODULE_4__button_module = webpack_require("../../../../element-angular/release/button/module.js");\n/ harmony import / var WEBPACK_IMPORTED_MODULE_5__checkbox_module = webpack_require("../../../../element-angular/release/checkbox/module.js");\n/ harmony import / var WEBPACK_IMPORTED_MODULE_6__icon_module = webpack_require("../../../../element-angular/release/icon/module.js");\n/ harmony import / var WEBPACK_IMPORTED_MODULE_7__radio_module = webpack_require("../../../../element-angular/release/radio/module.js");\n/ harmony import */ var WEBPACK_IMPORTED_MODULE_8__menu_module = webpack_require ... and in console "SCRIPT1002: syntax error"

Can you please fix this issue ?

Thanks

[unix]

It looks like ES6 grammatical incompatibility, you can try to run the following code at the console,
check that all syntax is compatible.

eval('class ಠ_ಠ extends Array{constructor(j=`a`,...c){const q=(({u: e})=>{return {[`${c}`]:Symbol(j)};})({});super(j,q,...c)}}new Promise(f=>{const a=function*(){return "\𠮷".match(/./u)[0].length===2||!0};for (let z of a()){const [x,y,w,k]=[new Set(),new WeakSet(),new Map(), new WeakMap()];break}f(new Proxy({},{get:(h,i) =>i in h ?h[i]:"j".repeat(0o2)}))}).then(t => new ಠ_ಠ(t.d))')

[Sancho66]

Thanks , I will check tomorrow and I will give you a feed back.

[Sancho66]

I have try your code and on IE11. Error :

SCRIPT5043: Accessing the 'caller' property of a function or |
| | | arguments object is not allowed in strict mode

I have seen a fix into https://stackoverflow.com/questions/16871050/inconsistent-scope-of-use-strict-on-different-web-browsers-concerning-argumen ... Can you do something to resolve this issue ?

[unix]

UI library can't carry polyfills, the error is that you lack a grammar, you need includes more shims, like babel polyfill and other.
Element Angular does not create any grammar, just use ES6. certainly, we have provided a low version of the file, in element-angular/bundle/element-angular.js, you can try this.

[Sancho66]

I have included all polyfills as mentionned on https://angular.io/guide/browser-support and added <meta http-equiv="X-UA-Compatible" content="IE=edge" /> in my home.html.

Here is my polyfills imports in polyfill.ts :
`***************************************************************************************************

• 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';
import 'core-js/es7/array';
import 'core-js/client/shim';

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

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/array';
import 'core-js/es7/reflect';

import 'web-animations-js'

/***************************************************************************************************

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

import 'intl';
import 'intl/locale-data/complete.js';
import 'intl/locale-data/jsonp/en.js'; `

and my ts.config.json :
{ "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "commonjs", "target": "es6", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } }

or

{ "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } }

and it still does not work on IE11 ...It is very frustrating.

[unix]

all right, i'll borrow a windows computer to see the problem at this weekend, but I can't guarantee that you can solve this problem😥😥

[Sancho66]

thanks for your support

[jocklei]

你好！ 按照你的方法做了相关IE的兼容处理，还是没有解决问题，看问题好像是没有将es6语法转换为es5，在IE11下面报错，怎么也找不到解决的办法，去掉element-angular组件，在IE11下面就不报错了，加上就报错，特喜欢你们的组件，但是...,哎，愁死了哦！ 报错信息： 见图片

…

--------------------------------------------------------------- 中瑞金服研发中心公共研发部框架组 Tel: 13589299411 Email：13589299411@163.com Address：青岛市市北区黑龙江南路2号万科中心C座10F En：Qingdao Lunz Technology Software Co. Ltd. On 2/6/2018 23:47，Sancho66<notifications@github.com> wrote： I have included all polyfills as mentionned on https://angular.io/guide/browser-support and added "" on my tag. Here is my polyfills imports in polyfill.ts : /*************************************************************************************************** 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'; import 'core-js/es7/array'; import 'core-js/client/shim'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run npm install --save classlist.js. /** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import 'core-js/es7/array'; import 'core-js/es7/reflect'; import 'web-animations-js' /*************************************************************************************************** Zone JS is required by default for Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI. import 'intl'; import 'intl/locale-data/complete.js'; import 'intl/locale-data/jsonp/en.js'; and my ts.config.json : { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "commonjs", "target": "es6", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } } or { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } } and it still does not work on IE11 ...It is very frustrating. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Sancho66]

Nǐ hǎo ,

Can you translate in english please ? :)

[jocklei]

hello， My project is angular4, which used a lot of the components of the third party, the project can run normally, but I used the element-angular component, in the following IE11 and Safar browser Report errors, compatible with me about IE in polyfills.ts are quoted below: Now I've used a component, and the code is as follows: With a "checkbox" component, it was wrong, but under the other browsers, it was wrong to report it under IE and Safar. 报错信息 报错代码： Ask for help! thank you！ --------------------------------------------------------------- 中瑞金服研发中心公共研发部框架组 Tel: 13589299411 Email：13589299411@163.com Address：青岛市市北区黑龙江南路2号万科中心C座10F En：Qingdao Lunz Technology Software Co. Ltd. On 2/7/2018 17:58，Sancho66<notifications@github.com> wrote： Nǐ hǎo , Can you translate in english please ? :) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[XGHeaven]

@WittBulter I found IE11 don't support class syntax. But you compile all ts file to es2015 target. It keeps class syntax.

How about to change project target to es5?

[unix]

the angular/cli cannot solve ES6 code of the third party lib, and you don't use eject at the same time,
so ES6 code appears in the your dist folder.
i adjust compile target to ES5, although this is not the best solution, but now you can solve IE's errors.
try upgrade element-angular.

[jocklei]

after upgrading to the latest version of 0.6.0, there are new mistakes under IE 11: just come in in the "modulet.ts" and make it wrong without using it. What's the matter?

…

--------------------------------------------------------------- On 2/8/2018 12:00，维特<notifications@github.com> wrote： Closed #13 via #18. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[jocklei]

after upgrading to the latest version of 0.6.1, there are new mistakes under IE 11: just come in in the "modulet.ts" and make it wrong without using it. What's the matter?

…

--------------------------------------------------------------- On 2/8/2018 12:00，维特<notifications@github.com> wrote： Closed #13 via #18. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.