如何在 Jsfiddle 中使用 Angular2 和 Typescript

Question

虚拟问题...
我尝试在 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/

Answer 1

您还需要包含 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，然后导入包含 bootstrap 函数的主模块：

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

Answer 2

在 Plunker 中，您可以只使用菜单

New > Angularjs > 2.0.x (TS)

获得一个最小的 Angular2 应用程序

路由器

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

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

<base href="."> 因为 index.html 的 <head> 中的第一个 child 可能也是必需的。

要切换到 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));

Answer 3

如果您不依赖 JS Fiddle，请考虑 Plunker。 Angular 开发人员在 this link.

上使用新的 Angular 版本保持最新的裸工作区

它甚至比 Plunker 自己的 Angular 2 设置（您可以从 Plunker 菜单访问：New > AngularJS > 2.0.x (TS)

缺点：该设置是在 TypeScript 中进行的，因此如果您希望使用 vanilla Javascript（ES5 或 ES6）进行开发，最好的办法是改用 Plunker 菜单选项。

如何在 Jsfiddle 中使用 Angular2 和 Typescript

How to use Angular2 and Typescript in Jsfiddle

import

module

jsfiddle

typescript

angular