وارد کردن - چگونه از Angular2 و Typescript در Jsfiddle استفاده کنیم

سؤال بیاهمیت ...
من تلاش میکنم یک برنامه Angular2 (نسخه 2.0.0-beta.6) را در Typescript در jsfiddle کدنویسی کنم.
میدانم که راهحلهای دیگری آنلاین وجود دارد اما ...
در واقع، مثال من بسیار کوچک است و مشکل روی ماژول import است:

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 ...) اضافه کنم اما کار نمیکند.
و دیگر هیچ بستهی خوداجرا برای نسخهی اخیر (beta-6) انگولار 2 (angular2.sfx.dev.js) وجود ندارد.

برخی تستها :
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/

پاسخ شماره ۱

در پلاکر شما میتوانید فقط از منو استفاده کنید

New > Angularjs > 2.0.x (TS)

برای بهدست آوردن یک برنامه Angular2 حداقلی و قابل اجرا

روتر

اگر میخواهید از روتر استفاده کنید، آن را در config.js اضافه کنید

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

ممکن است قرار دادن <base href="."> به عنوان اولین فرزند در <head> فایل index.html نیز ضروری باشد.

برای تغییر به HashLocationStrategy، main.ts را از

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

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

به

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

پاسخ شماره ۲

اگر به JS Fiddle وابسته نیستید، به جای آن Plunker را در نظر بگیرید. توسعهدهندگان Angular یک محیط کاری خالی را با نسخههای جدید Angular در این لینک بهروز نگه میدارند.

این حتی جدیدتر از تنظیمات Angular 2 خود Plunker است (که میتوانید از منوی Plunker به آن دسترسی پیدا کنید: جدید > AngularJS > 2.0.x (TS)

معایب: این تنظیمات در تایپاسکریپت است، بنابراین اگر میخواهید با جاوااسکریپت وانیلا (ES5 یا ES6) توسعه دهید، بهترین گزینه شما استفاده از گزینه منوی Plunker است.