Search code examples
javascriptangularpromiseinternet-explorer-11systemjs

Angular 2 with ES6 and Promises not working on Internet Explorer 11

I have an Angular 2 app running fine on Chrome / Edge but it fails on Internet Explorer with the following error.

enter image description here

I am using the following index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My App</title>

    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <link rel="stylesheet" href="css/site.css">

    <script src="scripts/es6-shim/es6-shim.min.js"></script>
    <script src="scripts/systemjs/system-polyfills.js"></script>
    <script src="scripts/angular2/shims_for_IE.js"></script>
    <script src="scripts/jquery/jquery.min.js"></script>
    <script src="scripts/bootstrap/bootstrap.min.js"></script>
    <script src="scripts/systemjs/system.js"></script>
    <script src="scripts/angular2/angular2-polyfills.min.js"></script>
    <script src="scripts/angular2/angular2.min.js"></script>
    <script src="scripts/angular2/http.min.js"></script>
    <script src="scripts/angular2/router.min.js"></script>
    <script src="scripts/angular2/Rx.min.js"></script>
    <script src="scripts/moment/moment-with-locales.min.js"></script>
    <script src="scripts/lightbox/lightbox.js"></script>
    <script src="scripts/html5sql/html5sql.min.js"></script>

    <script>
        System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });
        System.import('app/app/app.component');
    </script>
</head>
<body>
    <app></app>
</body>
</html>

The top 3 shims/polyfills should fix any missing functionality for IE as far as I can find. I'm not sure if it's the lack of native Internet Explorer support for Promises, ES6 or something else. I tried swapping all Promises to Observables but still the error remains.

Solution

  • For anyone interested, the solution was mainly to change my TypeScript output to ES5 instead of ES6. Even though I was using various ES6 shims, this still wasn't enough for Internet Explorer to work.

    UPDATE:

    Changing the TypeScript compiler output to ES5 was done in the tsconfig.json file:

    {
  "compilerOptions": {
    "target": "es5"
  }
}