如何使用plunker或jsfiddle运行angular2代码

Question

我试图在Angular 2的plnkr或jsfiddle中练习某些程序。但是，如果打开开发人员工具，我会看到404错误或一些其他异常，但我总是看到它们不起作用。在plnkr或jsfiddle中运行Angular2应用程序的正确方法是什么。

这是我指的链接：

A very basic program in Angular2 in jsfiddle

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

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }

Another jsfiddle example.

这两个是plnkr示例：Plunkr1，plunkr2

更新：

当我使用jsfiddle时，我选择了这样的Typescript + Angular 2

在开发人员控制台中，我仍然看到错误消息：

这些是错误的详细信息：

angular2.js:3282 Uncaught ReferenceError: System is not defined
    at angular2.js:3282
(anonymous) @ angular2.js:3282
angular2.dev.js:1 Failed to load resource: the server responded with a status of 404 ()
Rx.js:1 Failed to load resource: the server responded with a status of 404 ()
system.js:1 Failed to load resource: the server responded with a status of 404 ()
Rx.js:1 Failed to load resource: the server responded with a status of 404 ()
angular2.dev.js:1 Failed to load resource: the server responded with a status of 404 ()
require.js:8 Uncaught Error: Module name "angular2/platform/browser" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at G (require.js:8)
    at Object.e [as require] (require.js:27)
    at requirejs (require.js:33)
    at eval (eval at exec (typescript.js:41), <anonymous>:9:17)
    at exec (typescript.js:41)
    at HTMLDocument.runScripts (typescript.js:41)

Answer 1

Jsfiddle.net： 在jsfiddle的Javascript窗口中，您可以从单击JS框架标题时出现的下拉列表中选择使用Javascript + Angular。这是jsfiddle中一个相对较新的功能，它在几个月前已更新。

也请查看Stackblitz.com，这是另一个在线编辑器，可方便地与React / Angular和其他JS框架一起使用。

如果未找到文件等导致404异常，则可能是因为路径不正确/不完整或文件丢失。

在资源面板中，您可以找到不存在的资源的路径。冗余链接导致404错误。使用jsfiddle Javascript / Angular组合或使用有效的导入资源。删除冗余资源（require.js之外的所有资源），您将看到区别。同时更正所有语法错误。

希望这会有所帮助

（我不太用plunkr，在那儿不能提供建议）。