import – 如何在Jsfiddle中使用Angular2和Typescript

虚拟问题…
我尝试在jsfiddle的Typescript中编写一个angular2(2.0.0-beta.6)应用程序.
我知道有其他解决方案在线但…
其实我的例子很小,问题在于导入模块：

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/

在Plunker中,您可以使用菜单

New > Angularjs > 2.0.x (TS)

获得最小的Angular2应用程序

路由器

如果你想使用路由器添加在config.js

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

< base href =“.”>作为< head>中的第一个孩子的index.html也可能是必要的.

切换到HashLocationStrategy从main更改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));