如何在Jsfiddle中使用Angular2和Typescript

Question

虚拟问题..。

我尝试在jsfiddle中用Typescript编写一个angular2 (2.0.0-beta.6)应用程序。

我知道网上还有其他的解决方案，但是...

实际上，我的示例非常小，问题出在导入模块上：

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';

我得到了以下错误：

Uncaught ReferenceError: System is not defined
Uncaught ReferenceError: require is not defined

我尝试添加一些依赖项(要求、系统...)但它不起作用。

对于Angular2 (angular2.sfx.dev.js)的最新版本(beta-6)，也没有更多的自动执行包。

一些测试：

https://jsfiddle.net/asicfr/q8bwosfn/1/

https://jsfiddle.net/asicfr/q8bwosfn/3/

https://jsfiddle.net/asicfr/q8bwosfn/4/

https://jsfiddle.net/asicfr/q8bwosfn/5/

https://jsfiddle.net/asicfr/q8bwosfn/6/

Answer 1

如果您不依赖于JS Fiddle，请考虑使用Plunker。Angular开发人员在this link上发布了最新的Angular版本，从而保持了一个最新的工作空间。

它甚至比Plunker自己的Angular 2设置更新(您可以从Plunker菜单访问：New > AngularJS > 2.0.x (TS)

缺点:这种设置是在TypeScript中进行的，所以如果您希望使用普通的Javascript (ES5或ES6)进行开发，那么最好的选择是使用柱塞式菜单选项。

Answer 2

您还需要包含SystemJS JS文件。我看到你错过了。所有这些都是必需的：

<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>

然后，您还需要使用以下代码配置SystemJS，然后导入包含引导函数的主模块：

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true }, 
  packages: {
    'app': {
      defaultExtension: 'ts'
    }
  } 
});
System.import('app/main')
.then(null, console.error.bind(console));