设置AngularJS使用`jspm` 2项目 [英] Setup AngularJS 2 Project using `jspm`
问题描述
我试图安装AngularJS 2使用项目 JSPM ，首先我已经通过在angular.io下面的指令试图设置，它的工作就好了。
所以我想设置另一个相同的项目，但使用 JSPM 我有关于错误区规格要求，我试过谷歌，但我没有发现任何迄今为止，所以请指导我该怎么办
angular.io版本
的应用程序/ index.ts 的
从'angular2 /平台/浏览器的进口{}引导;
进口{} AppComponent从'./components/App';引导（AppComponent）;
的 index.html的的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT; AngularJS 2'; /标题＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.11/angular2-polyfills.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/tools/system.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =https://npmcdn.com/typescript@1.8.9/lib/typescript.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.11/Rx.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.11/angular2.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
System.config（{
transpiler：打字稿，
typescriptOptions：{emitDecoratorMetadata：真正}，
包：{应用：{defaultExtension：'TS'}}
}）; System.import（应用程序/指数'）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆所述; H3＆GT; AngularJS 2'; / H3＆GT;
＆LT;小时＆GT;
＆lt;试验应用＆GT;加载...＆LT; /测试应用程序与GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
JSPM 版本
的终端的
JSPM安装angular2反映，metada zone.js
的应用程序/ index.ts 的
进口'zone.js';
进口反映的元数据';从angular2 /平台/浏览器的进口{}引导;
进口{} AppComponent从'./components/App';引导（AppComponent）;
的 index.html的的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT; AngularJS 2'; /标题＆GT; ＆LT;脚本类型=文/ JavaScript的SRC =jspm_packages / system.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =config.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
System.config（{
transpiler：打字稿，
typescriptOptions：{emitDecoratorMetadata：真正}，
包：{应用：{defaultExtension：'TS'}}
}）; System.import（应用程序/指数'）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆所述; H3＆GT; AngularJS 2'; / H3＆GT;
＆LT;小时＆GT;
＆lt;试验应用＆GT;加载...＆LT; /测试应用程序与GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
请参见 https：//开头的github .COM /角/角/问题/ 7660
下面的技巧固定对我来说： https://github.com/角/角/问题/ 7660＃issuecomment-198624392
在主类中添加这个（略低于进口'zone.js'; ）
进口'zone.js /距离/长堆栈跟踪区';
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>
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';
这篇关于设置AngularJS使用`jspm` 2项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
