Import 如何在JSFIDLE中使用Angular2和Typescript

虚拟问题…
我尝试在JSFIDLE的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

我尝试添加一些依赖项（require、system…），但不起作用。
对于Angular2的最新版本（beta-6）（Angular2.sfx.dev.js），没有更多的自动执行包

一些测试：

---

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

然后，您还需要使用以下代码配置

SystemJS

，然后导入包含引导功能的主模块：

System.config({
transpiler:'typescript'，
typescriptOptions:{emitDecoratorMetadata:true}，
套餐：{
“应用程序”：{
defaultExtension:'ts'
}
} 
});
System.import（'app/main'）
.then（null，console.error.bind（console））；

在Plunker中，您只需使用菜单即可

New > Angularjs > 2.0.x (TS)

获取最小工作角度2应用程序

路由器

如果要使用路由器加载项

config.js

'@angular/router': {
  main: 'router.umd.js',
  defaultExtension: 'js'
},

作为

index.html

的

中的第一个孩子可能也是必要的

要切换到HashLocationStrategychange

main.ts

from

import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

到

---

如果您不与<代码> JS小提琴> <代码>有关，请考虑<代码> Plunker < /代码>。Angular开发人员通过最新的Angular版本保持一个最新的裸工作区

它甚至比Plunker自己的Angular 2设置（您可以从Plunker菜单访问：

New>AngularJS>2.0.x（TS）

---

缺点：这种设置是在TypeScript中进行的，因此如果您希望使用vanilla Javascript（ES5或ES6）进行开发，您最好的选择是使用Plunker菜单选项。

Plunkr对此更方便：对于Plunker，我使用from angular.io，它会将您重定向到Plunker，并添加适当的文件。它总是有最新的angular版本。非常方便。OP询问了JS Fiddle，但关于Plunkr链接，这是@Abdulrahman提供的是最好的，因为它包括路由和新的

@angular/forms

它不起作用…我用typscript、javascript尝试了所有东西…KO KOHonnestly，我对jsFiddle不是很熟悉，但从我看到的情况来看，你应该定义（如果可能的话）一个用于JavaScript的区域将包含您的SystemJS配置，另一个用于TypeScript内容（组件定义和引导）。您必须知道，基于上面的SystemJS配置，模块解析将通过路径完成。这意味着

app/main

必须是JSFIDLE可以解析的内容（

app/main.ts

）。这将对应于您的TypeScript区域。如果无法做到这一点，我认为在工具中使用Angular2应用程序将很困难：-（我对此进行了投票，因为从Plunker菜单开始很好，但更好的选项是。它由Angular团队（而不是Plunker团队）维护）例如，在本文撰写时，它包括了路由和新的

@angular/forms

，这两种格式都不是默认的

Plunker>Angularjs>2.0（TS）

workspace已停止运行，仅供参考，链接不再有效。Angular团队的维护工作不太一致。很遗憾，这一次他们最好不再这样做，至少在该链接上不这样做。

import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';
import {provide} from '@angular/core'
import {ROUTER_PROVIDERS} from '@angular/router';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

bootstrap(App, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HasLocationStrategy}])
  .catch(err => console.error(err));