Generator-jhipster: Angular 2 Internet Explorer problem

[serkaneren78]

• Please follow the issue template below for bug reports and feature requests.
• Tickets opened without any of these informations will be closed without any explanation.

Overview of the issue

Angular 2 monolithic application home page is not loading , getting error for IE 10-11.. There is no problem in chrome, edge and firefox..

IE 10

SCRIPT5009: 'Map' is undefined
vendor.dll.js (45115,9)

IE 11

SCRIPT5007: Unable to get property 'apply' of undefined or null reference
vendor.dll.js (54101,5)

Motivation for or Use Case

Reproduce the error

yarn start, page is not loading in IE 10-11.

Related issues

Suggest a Fix

JHipster Version(s)

4.0.3, 4.0.2

JHipster configuration

Angular 2 monolithic application

JHipster Version(s)

[email protected] D:\yeoman\jhipster\4.0.2\flow
`-- [email protected]

JHipster configuration, a .yo-rc.json file generated in the root folder

{
  "generator-jhipster": {
    "jhipsterVersion": "4.0.3",
    "baseName": "flow",
    "packageName": "com.liquidity.flow",
    "packageFolder": "com/liquidity/flow",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": "spring-websocket",
    "databaseType": "sql",
    "devDatabaseType": "postgresql",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "45f8a07be79784ded6f6dc1bb868afeb9ecdf6a7",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": false,
    "serviceDiscoveryType": false,
    "clientFramework": "angular2"
  }
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

ls: no such file or directory: .jhipster/*.json

Browsers and Operating System

java version "1.8.0_102"
Java(TM) SE Runtime Environment (build 1.8.0_102-b14)
Java HotSpot(TM) 64-Bit Server VM (build 25.102-b14, mixed mode)

git version 2.11.1.windows.1

node: v6.9.5

npm: 4.1.2

bower: 1.7.9

gulp:
[14:40:40] CLI version 3.9.1

yeoman: 1.8.5

yarn: 0.19.1

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

Windows 10 Home 64 Bit, Internet Explorer 11 - 10

• [X ] Checking this box is mandatory (this is just to show you read everything)

[JulienMrgrd]

Errors reproduced, on IE10 & 11 (on VirtualBox)
It concerns the vendor.dll.js file.

_On IE10 :_

_On IE11 :_

According to @flaviencathala, on IE11 it's a problem with @angular/common, and for IE10 @angular/core.
We're already up-to-date with angular. So, maybe the solution is to downgrade these. Not sure.
I'm on it.

[gmarziou]

I would rather think it's a problem of missing polyfills.

[flaviencathala]

I agree, as Angular is supposed to support IE 10 and 11, the issue comes very probably from the way we build the app.

[deepu105]

I wouldnt worry about IE10 as MS stopped support for it officially lets
target only IE11

Thanks & Regards,
Deepu

On Tue, Feb 14, 2017 at 5:02 PM, Flavien Cathala [e-mail]
wrote:

I agree, as Angular is supposed to support IE 10 and 11, the issue comes
very probably from the way we build the app.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/5186#issuecomment-279749527,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF4pnluYm33poOf0yO1UnTN_dSMRNks5rcc_9gaJpZM4L_GfD
.

[JulienMrgrd]

I've tested some solutions on IE11, without results...
http://stackoverflow.com/questions/41276692/angular2-ie11-unable-to-get-property-apply-of-undefined-or-null-reference

1. The Aldracor solution replace the error by another.
   > Object doesn't support property or method 'values'

I've not found any interesting post about the resolveReflectiveProviders function.

1. The Stas Berkov solution
   > Can't resolve all parameters for JhiTrackerService: ([object Object], [object Object], ?, ?, [object Object]).

Nothing on this too...

Any ideas ?

EDIT : Errors not related to the WebSocket option, but only Angular 2. OK on IE11 with AngularJS.

[serkaneren78]

Problem related to Polyfills.
polyfills from angular-seed project (https://github.com/angular/angular2-seed) fixed the problem. After that there is another error while injecting the window to JhiTrackerService in the IE.

In the tracker.service.ts , this change should be in the constructor of JhiTrackerService..
@Inject(Document) private $document: Document,
@Inject(Window) private $window: Window,

import 'ie-shim'; // Internet Explorer 9 support
// import 'core-js/es6';
// Added parts of es6 which are necessary for your project or your browser support requirements.
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';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
// import 'core-js/es6/promise';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';

[ramzimaalej]

I'm having a similar issue with vendor.dll.js
yo-rc.json.txt

[jdubois]

And did you find a solution ?

Le 21 févr. 2017 3:15 AM, "Ramzi Maalej" [e-mail] a
écrit :

I'm having a similar issue with vendor.dll.js
[image: screen shot 2017-02-20 at 9 13 32 pm]
https://cloud.githubusercontent.com/assets/1727621/23148088/9713cfd0-f7b1-11e6-9bf4-f83e4fc4923d.png

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/5186#issuecomment-281226240,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATVo_z8VUZFbq8D72KV023gVQV_dxuTks5rekjPgaJpZM4L_GfD
.

[asanzdiego]

Maybe the import of polyfills could fix the problem.

See: https://angular.io/docs/ts/latest/guide/browser-support.html

[deepu105]

The suggested polyfill for IE11 is this https://github.com/zloirock/core-js but
I guess we already have that

Thanks & Regards,
Deepu

On Tue, Feb 21, 2017 at 1:12 PM, Adolfo Sanz De Diego <
[email protected]> wrote:

Maybe the import of polyfills could fix the problem.

See: https://angular.io/docs/ts/latest/guide/browser-support.html

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/5186#issuecomment-281327001,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF651Jv_UCufZ6_OWVpOMFxFz8SSPks5retSegaJpZM4L_GfD
.

[ramzimaalej]

I'm not on IE, this was on Chrome after generating a fresh application using JHipster 4.0.5. Still looking into it

[serkaneren78]

Below polyfills and change in tracker.service fixed IE 10 and 11 problem..

tracker.service.ts

~ts
@Inject(Document) private $document: Document,
@Inject(Window) private $window: Window,
~

Polyfills.ts

~~~ts
import 'ie-shim'; // Internet Explorer 9 support
// import 'core-js/es6';
// Added parts of es6 which are necessary for your project or your browser support requirements.
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';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue AngularClass/angular2-webpack-starter#709
// import 'core-js/es6/promise';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
~~~

[ramzimaalej]

@serkaneren78 can you create a PR for this?

[holger-dunst]

What´s the reason that this issue got the minor label?

[jdubois]

None of us use Windows, so if you want to help, you're most welcome. Angry comments are noise, and make everyone lose time, so they definitely do not help.

[holger-dunst]

Why is this comment angry? Generated JHipster Applications don't work in IE11. This issue is not about the development os.

[deepu105]

Hi its minor becoz we consider IE support as low priority compared to others. The user base of IE is shrinking and we wont be spending lot of time on that so if you want to help you are welcome. If you want to support IE I suggest yoi use angular 1 version which is stable.

[holger-dunst]

I think you should not forget corporate users. Most companies have just switched to Windows7. That means IE11.

[jdubois]

guys, can we stop the talking here? @holgerdunst if you want to help, a PR on this will be very appreciated, as we can't work on this (none of us have Windows).
If big companies really need this, they can also sponsor the feature, this happens quite often. Even better, they can buy me a Surface Pro so I can test :-)

[kaidohallik]

I couldn't get working conditional loading. But after adding this to polyfills.ts:

import 'core-js/client/shim';

it's working in IE 11 and seems that this didn't break other browsers.

[jdubois]

Great work! Let's do this - no problem for testing on other browsers anyway

Le 24 mars 2017 7:50 AM, "Kaido Hallik" [e-mail] a écrit :

I couldn't get working conditional loading. But after adding this to
polyfills.js:

import 'core-js/client/shim';

it's working in IE 11 and seems that this didn't break other browsers.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/5186#issuecomment-288946715,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATVo0C4pOBoB6Utvf3BWMjtV8dbssT3ks5ro2elgaJpZM4L_GfD
.

[holger-dunst]

I checked the change with a fresh generated App with JHipster 4.1.1. The App does not work here. IE11 shows:
SCRIPT5022: Error: Can't resolve all parameters for JhiTrackerService: ([object Object], [object Object], ?, ?, [object Object]). vendor.dll.js (21030,13)
I had also to change the constructor of JhiTrackerService in tracker.service.ts. It works now. I added inject to Document and Window:

    @Inject(Document) private $document: Document,
    @Inject(Window) private $window: Window,

[deepu105]

Then could you guys plz PR those changes in? Lets have this workaround for now. I still think the core problem to investigate is why the code doesn't work as its transpiled to es5 anyway. May be it has some es5 code which stupid IE doesn't support

[jdubois]

@holgerdunst if you use Websockets that's a different issue - this is a quite complex option, let's not mix things up: first we make the "normal" app work, then we fix the options

@kaidohallik please do your PR, and @holgerdunst you can then do a PR on the PR for Websockets

[kaidohallik]

@deepu105 Seems that problem comes from vendor part. I tried following:

1. added this to package.json:

        "babel-core": "6.24.0",
        "babel-loader": "6.4.1",
        "babel-preset-es2015": "6.24.0",

1. added this to webpack.vendor.js:

            {
                test: /\.js$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015']
                        }
                    }
                ]
            }

But this didn't remove the error.

[kaidohallik]

@jdubois My addition to polyfills.ts increased page download size ~600 kB. That's another bad thing with this change. I'll do PR, then you can decide, merge it or not.

[deepu105]

@kaidohallik thats the exact reason why I wanted to use the polyfills from a CDN with an IE conditional something like below in <head> so that we dont add this for all browsers. Can you give it a try please

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js" />
<![endif]-->

https://cdnjs.com/libraries/es6-shim

[kaidohallik]

@deepu105 Conditional comments are no longer supported starting from IE 10:
https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx

[deepu105]

Damn it. They dont support stuff properly and now this. Idiots :angry: @kaidohallik do you know which line of code exactly causes the issue? may be we can try to modify that or open a bug report on that library

[kaidohallik]

In IE 11 same line as reported by @JulienMrgrd in https://github.com/jhipster/generator-jhipster/issues/5186#issuecomment-279742914
@JulienMrgrd posted SO link in https://github.com/jhipster/generator-jhipster/issues/5186#issuecomment-280294143
In that link in one comment is link to MDN where is information that Object.assign() is not supported in IE.

[gmarziou]

Wow then it should probably be documented as a tip.

[deepu105]

Object.assign is ES6 why isnt this transpiled to ES5 by awesome-typescript-loader?

[deepu105]

Lets try to add only polyfills that are required for this
We should try https://github.com/es-shims/es5-shim as well and see if it helps

[sendilkumarn]

awesome-typescript-loader is using object-assign lib which is supporting from edge onwards.

are you sure es5-shim supports object assign ?

[deepu105]

may be we should raise a ticket to awesome typescript lib and in the mean time we can add a shim specific for Object.assign

[kaidohallik]

es5-shim didn't resolve this issue in IE 11.
I changed PR #5483 - now shim is loaded only for IE 11.

[deepu105]

PR merged

[avoliva]

I'm getting a similiar issue, but Math is showing as undefined here.

[playground]

Getting the same error. ie11 object doesn't support property or method 'assign'

[gmarziou]

@avoliva and @playground please don't comment on an old closed issue, it doesn't help at all. Please open a new issue with all required details.