JSFiddle 上的 Angular2 – 如何包含 .ts 文件？答案

【问题标题】：Angular2 on JSFiddle – How to include .ts file?JSFiddle 上的 Angular2 – 如何包含 .ts 文件？
【发布时间】：2017-07-21 17:50:48
【问题描述】：

我是第一次使用 jsFiddle。我不知道如何在其中包含我的所有文件。目前在运行小提琴时它返回一个 404。我如何链接我的本地 ts 文件以使其运行。

我的小提琴位于here。任何帮助将不胜感激。

<script>document.write('<base href="' + document.location + '" />');</script>
 <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: { emitDecoratorMetadata: true },
      packages: {'app': {defaultExtension: 'ts'}} 
    });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

这会返回：

angular2-polyfills.js:1243 错误：XHR 错误（404 NOT FOUND）加载 https://fiddle.jshell.net/Unnati/kje2sr61/show/app/main.ts(…)

【问题讨论】：

您会考虑使用 plunker 代替吗？
是的，它也可以。
我在下面提供了一个示例。它符合您的需求吗？

标签： angular jsfiddle plunker

【解决方案1】：

这是一个 plunker 中的 Angular2 入门项目：http://plnkr.co/edit/F5lDxrDUFlNQQZimUhk9?p=preview

它由一个简单的AppComponent 引导

@Component({
  selector: 'my-app',
  template: `
  <h2>Hello World</h2>`,
  providers: []
})
export class App implements ngAfterViewInit{
  name:any;

  constructor() {}

  ngAfterViewInit(){
  }
}

所有system.config 类型的配置都已设置。如果您想更改它并保存以备后用，只需点击屏幕顶部的“Fork”即可。

更新： Plunker 现在为 Angular 2.0.x 提供了一个默认模板选项

你可以点击New -> Angular -> 2.0.x右边的箭头

【讨论】：

我已经分叉了上面提供的 plunker 链接，每当我进行任何编辑时，它都会在一个新选项卡中打开结果，这会减慢我编写代码的速度。
@SiddharthSharma 似乎是 zone.js 版本 groups.google.com/forum/#!topic/plunker/cPEILSWfjS4 的错误。将其升级到 0.6.25。
如果有人遇到代码结果在新选项卡中打开的问题，可以通过在 plunkr 的设置选项卡中禁用底部的自动保存来暂时解决此问题。在此之后，您将需要手动保存。

【解决方案2】：

您可以点击下拉菜单 NEW 并点击 Angular 这将自动生成一个 angular4 模板。

【讨论】：