Angular 2无法在IE中工作

时间:2017-01-08 07:19:47

标签: internet-explorer angular cross-browser

My Angular 2应用程序似乎在IE中获得了Break。但是,它在Chrome中运行良好。 我完成了Angular 2 with IE 11 not working中所做的更改,但仍然没有运气。

以下是我的用于参考的配置文件:

<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"
    ]
}

我得到的错误是:

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>

1 个答案:

答案 0 :(得分:0)

您可能希望修改在tsconfig中设置为“目标”的内容。

定位“es6”并期望它在IE11中运行可能是不明智的。

查看下面的兼容性表格。 IE11似乎根本不支持ES6。

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

我建议将目标更改为“es5”。

您仍然可以在tsconfig.json中设置“lib”属性,以便您可以使用“es6”功能。

{
    "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"
    ]
}