JSFiddle上的Angular2 - 如何包含.ts文件？

我第一次使用jsFiddle。我不知道如何将所有文件都包含进去。目前在运行小提琴时，它会返回一个404.如何链接我的本地ts文件以使其运行。JSFiddle上的Angular2 - 如何包含.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 Error: XHR error (404 NOT FOUND) loading https://fiddle.jshell.net/Unnati/kje2sr61/show/app/main.ts (…)

来源

2016-12-14 Unnati

你会考虑使用plunker吗？ – echonax

是的，它也可以。 – Unnati

我在下面提供了一个例子。它是否适合您的需求？ – echonax

下面是一个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类型的configs是组。如果你想改变它并保存以备后用，只需点击屏幕顶部的“叉”即可。

更新： Plunker现在有角2.0.x版本默认模板选项

您可以单击箭头新的右键 - >角 - > 2.0.x的

来源

2016-12-14 09:55:56 echonax

我已经分叉了上面提供的plunker链接，每当我做任何编辑它打开结果在一个新的标签，这是放缓我写在代码中。 –

@SiddharthSharma好像是一个zone.js版本https://groups.google.com/forum/#!topic/plunker/cPEILSWfjS4的错误。升级到0.6.25。 – echonax

如果有人正面临在新选项卡中打开代码结果的问题，可以通过在plunkr的设置选项卡中禁用自动保存底部来暂时修复相同的问题。在此之后，您将需要手动保存。 –

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

来源

2017-07-21 09:50:48

JSFiddle上的Angular2 - 如何包含.ts文件？

回答

相关问题