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

代わりにプランカを使用することを検討しますか？ – echonax

はいそれもOKです。 – Unnati

私は以下の例を提供しました。それはあなたのニーズに合っていますか？ – echonax

はここplunkerでAngular2スタータープロジェクトだ：http://plnkr.co/edit/F5lDxrDUFlNQQZimUhk9?p=preview

コンフィグの全てsystem.config種類があり、単純なAppComponent

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

    constructor() {} 

    ngAfterViewInit(){ 
    } 
}

でブートストラップされますセット。あなたがそれを変更し、後で使用するために保存する場合は、単に画面の上部にある "フォーク"をクリックしてください。

更新： Plunkerは今角度の2.0.xのデフォルトテンプレートのオプションを持っている

あなたは矢印に新しいの右をクリックすることができます - >アンギュラ - > 2.0.xの

出典

2016-12-14 09:55:56 echonax

私は上に提供されたプランカリンクをフォークしました。編集するたびに新しいタブで結果を開き、コードを書くのを遅くしています。 –

@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ファイルを含める方法

答えて

関連する問題