Setup AngularJS 2 Project using `jspm`

问题

I'm trying to setup AngularJS 2 project using jspm, firstly I had tried to setup by following instruction on the angular.io, it's working just fine

So I'm trying to setup another same project but using jspm I'm having error about "ZoneSpec required", I had tried to google but I have found nothing so far, so please guide me what to do

angular.io Version

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` Version

Terminal

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>

回答1:

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

The following tip fixed it for me: https://github.com/angular/angular/issues/7660#issuecomment-198624392

Add this in your main class (just under import 'zone.js';) :

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

来源：https://stackoverflow.com/questions/36112548/setup-angularjs-2-project-using-jspm

标签

angularjs

jspm

Setup AngularJS 2 Project using `jspm`

问题

angular.io Version

jspm Version

回答1:

`jspm` Version