I have a website built on Angular and SystemJS, and our live site is not rendering on IE11. We don't get any errors, just an empty body. We don't even see the "Loading..." text.
When I run this locally during development, IE works just fine, so it would seem that there is something missing in the compiled and bundled version.
You're welcome to look at the site here.
Here are some of the differences between dev and live:
html dev
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>window.module = 'aot';</script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) {
console.error(err);
});
</script>
html live
<!-- Polyfill(s) for older browsers -->
<script src="shim.min.js"></script>
<script src="zone.min.js"></script>
<script>window.module = 'aot';</script>
<script>window.bhmcVersion='INJECT-VERSION';</script>
tsconfig.json (dev)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"suppressImplicitAnyIndexErrors": true
}
}
tsconfig-aot.json (live)
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true,
"typeRoots": [
"node_modules/@types/"
]
},
"files": [
"src/app/app.module.ts",
"src/app/main-aot.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
I looked at this post and added these imports to my main-aot.ts file, but that has not fixed the problem:
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';
The most frustrating thing about this problem is that there are no errors showing up in the console on IE11. No starting point to troubleshoot. No other browser related issues have been brought to my attention. Works great in Chrome, of course.
I really appreciate any help the community has to offer on this. Please let me know if I've left out any important details.
Update
I added polyfills via cdn and commented out the imports in main-aot.ts
, but the behavior in IE hasn't changed:
<script src="shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
<script src="zone.min.js"></script>
Update 2
I rolled back my version of Angular from 4.0.0 to 2.4.9, and IE is working again. I don't love this as a solution, however, since the 2x version is 35% larger than the 4x version.
I know there was a significant animation change from 2 to 4 -- what, though, could cause the symptoms we're seeing?