使用`jspm`设置AngularJS 2项目

时间:2016-03-20 10:22:24

标签: angularjs jspm

我尝试使用jspm设置AngularJS 2项目,首先我尝试按照angular.io上的说明进行设置,它工作得很好

所以我尝试设置另一个相同的项目,但是使用import { bootstrap } from 'angular2/platform/browser'; import { AppComponent } from './components/App'; bootstrap(AppComponent); 我有关于" 需要ZoneSpec "的错误,我有试图谷歌但我到目前为止没有找到任何东西,所以请指导我做什么

angular.io版本

应用程序/ index.ts

<!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>

的index.html

jspm

jspm install angular2 reflect-metada zone.js 版本

终端

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

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

bootstrap(AppComponent);

应用程序/ index.ts

<!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>

的index.html

    import multiprocessing

class MyFancyClass(object):

    def __init__(self, name):
        self.name = name

    def fancyfancyfunction(self) :
        print "My name is so fancy : '%s'" %self.name

def worker(q):
    obj = MyFancyClass('Fancy fancy')
    q.put(obj)

if __name__ == '__main__':
    queue = multiprocessing.Queue()

    p = multiprocessing.Process(target=worker, args=(queue,))
    p.start()
    obj = queue.get()
    print obj.name
    obj.fancyfancyfunction()
    p.join()

1 个答案:

答案 0 :(得分:1)

请参阅https://github.com/angular/angular/issues/7660

以下提示为我解决了这个问题:https://github.com/angular/angular/issues/7660#issuecomment-198624392

在主要课程中添加此内容(位于import 'zone.js';下方):

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