Question

我需要为php + mysql项目创建一个Angular2 + TypeScript前端。当我使用npm（jspm，tsd，webpack或gulp）或者使用code.angularjs.org的链接时，一切正常。但是当我试图仅使用一些Angular2本地文件时，systemjs将通过它的组件注册来破坏所有内容并向我抛出这样的异常：

Uncaught SyntaxError: Unexpected token <

如果使用脚本和组件/视图实现index.html，文档中也存在一些混淆。在文档的深处，我找到了一个几乎适合我的例子：

<!DOCTYPE html>
<html>
<head>
  <title>angular2 playground</title>
  <link rel="stylesheet" href="style.css">
  <script src="tools/traceur-runtime.js"></script>
  <script src="tools/system.js"></script>
  <script src="tools/typescript.js"></script>
  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>
<body>
  <my-app>
    loading...
  </my-app>
</body>
</html>

但是，当我将angular2.min.js替换为本地版本时，我收到上述错误。

有谁知道如何修复它？

更新

感谢Chako answer，我确实以这种方式设置了它，它对我有用：

<script type="text/javascript" src="./libs/es6-shim.min.js"></script>
<script type="text/javascript" src="./libs/system-polyfills.js"></script>
<script type="text/javascript" src="./libs/system.src.js"></script>
<script type="text/javascript" src="./libs/Rx.min.js"></script>
<script type="text/javascript" src="./libs/angular/angular2-polyfills.js"></script>
<script type="text/javascript" src="./libs/angular/angular2.dev.js"></script>
<script type="text/javascript" src="./libs/angular/router.dev.js"></script>
<script type="text/javascript" src="./libs/angular/http.dev.js"></script>
<script>
System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/main').then(null, console.error.bind(console));
</script>

此外，我尝试更新为beta 8，但查找文件已损坏，因此我将beta 6作为稳定版本。

还有一些时刻：

*.min.js版本无法正常使用。

Rx.min.js

新beta 8向我抛出了关于DI（依赖注入）的异常。
tsc不再支持Microsoft了，它抛出了编译错误并退出watch。所以我安装了ntsc，它运行得更快，但在控制台中写入了更多的TypeScript错误。

Answer 1

你可以试试下面的代码吗？用npm下载所有必需的js。

<script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="node_modules/typescript/lib/typescript.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>   
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

您可以在package.json的以下代码中找到所需的依赖项。

{
  "name": "angular2-material-menu",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "bootstrap": "^3.3.6",
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "ng2-material": "^0.2.1",
    "typescript": "^1.7.3"
  }
}

这对我有用。

这是boot.ts：

import {bootstrap}    from 'angular2/platform/browser'
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HttpService} from 'app/component/http/http.service';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, HttpService]).then(app => {
        console.log('Bootstrap Successful');
    }, err => {
        console.error(err);
    });

Angular2使用typescript环境分隔文件

1 个答案: