Angular2使用TypeScript环境分离文件

Question

Angular2使用TypeScript环境分离文件

3

我需要为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的回答，我按照这种方式进行设置，现在它对我有效：

<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 版本无法正常工作。
从 beta 8 开始使用新的 Rx.min.js，会抛出一个关于 DI（依赖注入）的异常。
Microsoft 不再支持 tsc，并且在 watch 中会抛出编译错误并退出。因此，我安装了更快的 ntsc，但在控制台中输出的 TypeScript 错误更多。

- Mike Datsko

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Valay · Accepted Answer

请尝试以下代码。使用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);
    });