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）没有更多的Self-Executing捆绑包。

一些测试：
    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

在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.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 2

如果您不与In [11]: i = Idx('i') In [12]: class IntegerIndexed(Indexed): ....: is_integer = True ....: In [13]: IntegerIndexed("A", i) Out[13]: A[i] In [14]: IntegerIndexed("A", i).is_integer Out[14]: True绑定，请考虑使用JS Fiddle。 Angular开发人员在this link处使用新的Angular版本保持最新的工作空间。

它甚至比Plunker自己的Angular 2设置更新（你可以从Plunker菜单访问：Plunker

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

Answer 3

You need also to include SystemJS JS file. I saw that you missed it. All these includes are necessary:

Where(x=> x.Key.Date == DateTime.Now.Date)

You also need then to configure <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> with the following code and then import your main module containing the bootstrap function:

SystemJS

如何在Jsfiddle中使用Angular2和Typescript

3 个答案: