Angular2 app deployed in Liferay stuck at “Loading…” with Internet Explorer 11

0
votes

I am trying to deploy my Angular IO app to Liferay platform with variable success. Mozilla Firefox and Google Chrome render the Liferay portlet without any troubles, but Internet Explorer 11 fails at it. To make matters even more bizarre, the app works fine with IE11 on localhost meaning that the polyfills.ts is working as expected.

EDIT: By studying the debugger a bit more on IE11 I found out that none of the js bundles generated by Angular are loaded. GET on main.bundle.js, vendor.bundle.js, polyfills.bundle.js, styles.bundle.js and inline.bundle.js results in 404 Not Found.

EDIT2: The 404 happens because Exploder's request URL for GET is blatantly wrong. The correct syntax for URL is http://host/portlet/app/*.bundle.js, in Internet Explorer 11 the request URL is http://host/web/guest/page/portlet/app/*.bundle.js.

1
angularliferayinternet-explorer-11
Any errors on the console? - DarthJDG
Only warnings as seen in the first picture. - Simo Partinen
at least work on the warnings you see: A document with multiple <html>, <body> etc is illegal and you can't blame a browser for not rendering it to your expectation. Liferay takes care of this part of the markup, meaning that your angular (or your portlet's) content must not contain this markup - Olaf Kock
Do you mean I should remove most if not all doctype, <head> and <body> declarations from my project? Why are Chrome, Edge and Firefox able to render the content without these warnings? - Simo Partinen
Well, a browser is free to warn about what it wants. And it's free to not render illegal content. I'm not saying that this is your solution, but if there's a warning, follow those signs first, then worry about more advanced stuff - Olaf Kock

1 Answers

0
votes

I found out that the GET URL for scripts was malformed in Internet Explorer (EDITs of the original question. @OlafKock hinted to inspect how the GET URL is formed so I found out that my index.jsp file that's in charge of downloading the *bundle.js files, was lacking a single / character.

I then proceeded to apply the following fix:
<script type="text/javascript" src="portlet/*.bundle.js"></script>
=>
<script type="text/javascript" src="/portlet/*.bundle.js"></script>

Now everything works also on Internet Explorer 11.