Search code examples
angulartypescriptinternet-explorer-10

Angular CLI app not working on IE 10

enter image description hereI have added shim.min.js and shims_for_IE.js in my index.html file.

Here is my file:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Test Manager</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <script src="assets/ie/shim.min.js"></script>
        <script src="assets/ie/shims_for_IE.js"></script>
        <script src="assets/ie/web-animations.min.js"></script>

    </head>

The app is working fine in Chrome, Firefox and IE 11.

But it is not working in IE 10. In IE 10 it's not updating DOM. It's getting stuck.

Solution

  • It depends on what else you are running I suppose, I can remember 3 hurdles for IE10, I will add some more if I remember.

    1) I needed to add at least 1 locale with intl;

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

    2) The usual IE stuff like, an example might be something like:

    var st = document.documentElement.scrollTop || document.body.scrollTop;

    3) I needed a mutation observer shim but that's only because I'm using material2 I believe. https://github.com/megawac/MutationObserver.js

    There are also many required shims - https://angular.io/docs/ts/latest/guide/browser-support.html

    angular-cli also has a polyfills.ts preset with all of the important shims.