Angular2 on JSFiddle – How to include .ts file?

问题

I am using jsFiddle for the first time. I do not know how to include all my files in it. Currently when running the fiddle it returns a 404. How do i link my local ts file to make it run.

My fiddle is located here. Any help would be greatly appreciated.

<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>

This returns:

angular2-polyfills.js:1243 Error: XHR error (404 NOT FOUND) loading https://fiddle.jshell.net/Unnati/kje2sr61/show/app/main.ts(…)

回答1:

Here's an Angular2 starter project in a plunker: http://plnkr.co/edit/F5lDxrDUFlNQQZimUhk9?p=preview

It's bootstrapped with a simple AppComponent

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

  constructor() {}

  ngAfterViewInit(){
  }
}

all system.config type of configs are set. If you want to change it and save for later use just click "Fork" at the top of the screen.

Update: Plunker now has a default template option for Angular 2.0.x

You can click the arrow the right of New -> Angular -> 2.0.x

回答2:

You can click the dropdown NEW and click Angular this will automatically generate an angular4 template.

来源：https://stackoverflow.com/questions/41137028/angular2-on-jsfiddle-how-to-include-ts-file