はJsfiddle

ダミーの質問...
にAngular2と活字体を使用するためにはどうすればjsfiddleに活字体でangular2（2.0.0-beta.6）アプリをコーディングしてみてください。
私は、私の例は非常に小さく、問題がインポートモジュール上で実際に
他のソリューションがオンラインがあることを知っているが...：はJsfiddle

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

私は、次のエラーを得た：

Uncaught ReferenceError: System is not defined 
Uncaught ReferenceError: require is not defined

いくつかの依存関係（require、system ...）を追加しようとしましたが、動作しません。
Angular2（angular2.sfx.dev.js）の最新バージョン（beta-6）のための自己実行バンドルはありません。

一部のテスト：
https://jsfiddle.net/asicfr/q8bwosfn/1/
https://jsfiddle.net/asicfr/q8bwosfn/3/
https://jsfiddle.net/asicfr/q8bwosfn/4/
https://jsfiddle.net/asicfr/q8bwosfn/5/
https://jsfiddle.net/asicfr/q8bwosfn/6/

出典

2016-02-12 asicfr

Plunkrははるかに便利です：http://plnkr.co/edit/duastrVR5HUgJUgr3uBf?p=info – dfsq

プランナーの場合、私は[thisあなたにリダイレクトされるangle.ioのリンク（https://angular.io/resources/live-examples/quickstart/ts/plnkr.html）に、適切なファイルが既に追加されています。小会議nt。 – Abdulrahman

OPはJSフィドルについて尋ねましたが、plunkrリンクのうち、@Abdulrahmanによるものは、ルーティングと新しい '@ angular/forms 'を含んでいるので最高です – BeetleJuice

Plunkerであなただけのメニューを使用することができます

New > Angularjs > 2.0.x (TS)

最小限の作業Angular2アプリケーションを取得します

あなたは、ルータを使用する場合は

ルータは、同様に必要になる場合がありますindex.htmlの<head>に最初の子としてconfig.js

'@angular/router': { main: 'router.umd.js', defaultExtension: 'js' },

<base href=".">に追加します。
はあなたがJS Fiddleに縛られていない場合は、

import {bootstrap} from '@angular/platform-browser-dynamic'; import {App} from './app'; import {provide} from '@angular/core' import {ROUTER_PROVIDERS} from '@angular/router'; import {LocationStrategy, HashLocationStrategy} from '@angular/common'; bootstrap(App, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HasLocationStrategy}]) .catch(err => console.error(err));

出典

2016-05-25 06:26:10

Plunkerメニューからの起動は良いですが、 https://angular.io/resources/live-examples/quickstart/ts/plnkr.html。これは、Angunkチーム（Plunkerチームではない）によって管理されているので、より最新のものです。デフォルトの 'Plunker> Angularjs> 2.0（TS）'のワークスペースにはありません。 – BeetleJuice

あなたはSystemJS JSファイルを含めることも必要です。私はあなたがそれを逃したのを見た。これらのすべては、が必要です：

<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="https://code.angularjs.org/tools/typescript.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>

あなたはまた、次のコードでSystemJSを設定し、ブートストラップ機能を含む、あなたのメインモジュールをインポートする、その後必要があります。

System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: { 
    'app': { 
     defaultExtension: 'ts' 
    } 
    } 
}); 
System.import('app/main') 
.then(null, console.error.bind(console));

出典

2016-02-12 20:20:41

これはうまくいきません...私はtypscript、 javascript ... https://jsfiddle.net/asicfr/q8bwosfn/8/ KO https://jsfiddle.net/asicfr/q8bwosfn/9/ KO https://jsfiddle.net/asicfr/q8bwosfn/10/KO https://jsfiddle.net/asicfr/q8bwosfn/11/ KO – asicfr

私はjsFiddleにはあまり慣れていませんが、私が見たことから、（可能であれば）あなたのSystemJS構成とTypeScriptコンテンツ用（コンポーネント定義とブートストラップ）。上記のSystemJSの設定に基づいて、モジュールの解決はパスで行われることに注意する必要があります。つまり、 'app/main'はjsFiddle（' app/main.ts'）で解決できるものでなければなりません。これはあなたのTypeScript領域に対応します。 –

もしそれができないのであれば、私はツールでAngular2アプリケーションを使うのは難しいと思っています:-( –

に

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {App} from './app'; 

bootstrap(App, []) 
    .catch(err => console.error(err));

からHashLocationStrategy変更main.tsに切り替える代わりにPlunkerを検討します。 Angularデベロッパーは、Angularの新しいリリースをthis linkにして、裸のワークスペースを最新の状態に保ちます。New > AngularJS > 2.0.x (TS)

欠点：あなたはバニラJavaScriptで開発したいので、もしその設定は、活字体である（ES5

は、それはあなたがPlunkerメニューからアクセスすることができさえPlunker独自の角度2セットアップ（より多くの電流であり、またはES6）を使用することをお勧めします。

出典

2016-06-25 04:41:58 BeetleJuice

これはより良いですhttp://stackoverflow.com/questions/41137028/angular2-on- jsfiddle-how-to-include-ts-file＃41139595 –

答えて

関連する問題