Angular 2 not Working in IE

Question

My Angular 2 Application seems to get Break in IE.However,it is working Fine in Chrome. I have done the Changes made in Angular 2 with IE 11 not working but still no Luck.

Below are my Config files for refrence:

<title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!---<link rel="stylesheet" href="styles.css">-->
      <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="modify.css">
     <script type="text/javascript" src="node_modules/moment/moment.js"></script> 
     <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <!-- 1. Load libraries -->
     <!-- Polyfill 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.polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
       "node_modules",
        "typings"
    ]
}

Error I am getting Is:

SyntaxError: Syntax error
at Anonymous function (eval code:3:1)
 at Anonymous function (eval code:1:31)
at eval code (eval code:1:2)
Evaluating http://localhost:3000/app/app.module.js
Evaluating http://localhost:3000/app/main.js
Error loading http://localhost:3000/app/main.js

Index.html

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!---<link rel="stylesheet" href="styles.css">-->
      <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="modify.css">
     <script type="text/javascript" src="node_modules/moment/moment.js"></script> 
     <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <!-- 1. Load libraries -->
     <!-- Polyfill 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.polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
        <script src="node_modules/jquery/dist/jquery.js"></script>
            <script src=" jquery.fixme.min.js"></script>
    <base href="/"> 
  </head>
  <!-- 3. Display the application -->
  <body>
  <!--  <div class="loading-icon"></div> -->
    <my-language>
      <i class="fa fa-spinner fa-pulse fa-5x fa-fw center-spinner"></i>
      <span class="sr-only">Loading...</span>
    </my-language>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  </body>
</html>

which version of Angular2 are you using? for latest version `` not required to add. — micronyks, Jan 08 '17 at 07:28
yeah @micronyks....I am aware of that.I added today only just for Testing purpose,will remove the same. — Avinash, Jan 08 '17 at 07:35

score 0 · Answer 1 · answered Apr 28 '17 at 01:19

You might want to revise what you set as your "target" in your tsconfig.

Targeting "es6" and expecting it to work in IE11 might be unwise.

Check out the compatibility table below. IE11 doesn't seem to support ES6 very well at all.

https://kangax.github.io/compat-table/es6/

I would suggest changing the target to "es5".

You can still set the "lib" property in tsconfig.json so that you can use "es6" features though.

{
    "compilerOptions": {
        "rootDir": "./src/app/",
        "lib": ["es2015", "dom"],
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        ".git"
    ]
}

Angular 2 not Working in IE

1 Answers1