使用 `jspm` 设置 AngularJS 2 个项目

Question

我正在尝试使用 jspm 设置 AngularJS 2 项目，首先我尝试按照 angular.io 上的说明进行设置，它工作正常

所以我正在尝试设置另一个相同的项目，但使用 jspm 我遇到关于“ZoneSpec required”的错误，我曾尝试 google 但到目前为止我什么也没发现，所以请指导我该怎么做

angular.io版本

app/index.ts

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './components/App';

bootstrap(AppComponent);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 2</title>
    <script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/angular2.js"></script>

    <script type="text/javascript">
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: { 'app': { defaultExtension: 'ts' } }
        });

        System.import('app/index');
    </script>
</head>
<body>
    <h3>AngularJS 2</h3>
    <hr>
    <test-app>Loading ...</test-app>
</body>
</html>

`jspm`版本

航站楼

jspm install angular2 reflect-metada zone.js

app/index.ts

import 'zone.js';
import 'reflect-metadata';

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './components/App';

bootstrap(AppComponent);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 2</title>

    <script type="text/javascript" src="jspm_packages/system.js"></script>
    <script type="text/javascript" src="config.js"></script>

    <script type="text/javascript">
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: { 'app': { defaultExtension: 'ts' } }
        });

        System.import('app/index');
    </script>
</head>
<body>
    <h3>AngularJS 2</h3>
    <hr>
    <test-app>Loading ...</test-app>
</body>
</html>

Answer 1

见https://github.com/angular/angular/issues/7660

以下提示为我修复了它：https://github.com/angular/angular/issues/7660#issuecomment-198624392

将此添加到您的主 class（就在 import 'zone.js'; 下方）：

import 'zone.js/dist/long-stack-trace-zone';

使用 `jspm` 设置 AngularJS 2 个项目

Setup AngularJS 2 Project using `jspm`

angularjs

jspm

angular.io版本

jspm版本

`jspm`版本