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>

标签： angularjs jspm

1条回答

闹够了就滚

2楼-- · 2019-09-11 03:15

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';

0人赞添加讨论(0) 举报