如何在Jsfiddle中使用Angular2和Typescript

假问题...
我尝试在jsfiddle的Typescript中编码angular2（2.0.0-beta.6）应用程序。
我知道有其他的解决方案在线，但...
其实，我的例子是非常小的，问题是导入模块上：如何在Jsfiddle中使用Angular2和Typescript

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

对于plunker，我使用[this链接]（https://angular.io/resources/live-examples/quickstart/ts/plnkr.html），它会将你重定向到合适的文件已经添加的文件夹，它总是有最新的角度版本。 convenie NT。 – Abdulrahman

OP询问JS小提琴，但是在plunkr链接中，这个由@Abdulrahman编写的是最好的，因为它包含了路由和新的'@ angular/forms' – BeetleJuice

在Plunker你可以使用菜单

New > Angularjs > 2.0.x (TS)

获得一个最小的工作Angular2应用

路由器

如果您想使用的路由器config.js

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

<base href=".">添加为第一个孩子的index.html的<head>可能是必要的，也是。

从

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

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

切换到HashLocationStrategy变化main.ts到

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

我upvoted这个，因为从Plunker菜单开始是好的，但更好的选择是https://angular.io/resources/live-examples/quickstart/ts/plnkr.html。它由Angular团队（不是Plunker团队）维护，因此它更加流行。例如，在撰写本文时，它包括路由为以及新的'@ angular/forms'，这两者都不是默认的'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，但是从我所看到的，您应该定义（如果可能）JavaScript的一个区域，它将包含您的SystemJS配置，一个用于TypeScript内容（组件定义和引导）。你必须知道，基于上面的SystemJS配置，模块解析将通过路径完成。这意味着'app/main'必须是可以由jsFiddle（'app/main.ts'）解决的东西。这将对应于您的TypeScript区域。 –

如果无法做到这一点，我认为这将是困难的工具中使用Angular2应用程序:-( –

如果你不依赖于JS Fiddle，考虑Plunker来代替。 Angular开发人员通过this link获得最新的Angular版本，以保持最新的工作空间。

它甚至比Plunker自己的角2的设置（这可以从Plunker菜单访问更多的电流：New > AngularJS > 2.0.x (TS)

缺点：安装程序是打字稿，所以如果你想与香草的Javascript开发（ES5或ES6），您最好的选择是使用Plunker菜单选项。

来源

2016-06-25 04:41:58 BeetleJuice

这一个更好http://stackoverflow.com/questions/41137028/angular2-on-的jsfiddle，如何对包括-TS文件＃41139595 –

如何在Jsfiddle中使用Angular2和Typescript

回答

相关问题