web-dev-qa-db-ja.com

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

いくつかの依存関係（必須、システムなど）を追加しようとしましたが、機能しません。
そして、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/

importmoduletypescriptangularjsfiddle
20
asicfr

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));
10
Günter Zöchbauer

_JS Fiddle_に縛られていない場合は、代わりにPlunkerを検討してください。 Angular開発者は、最新のAngularリリース時に このリンク で最新のワークスペースを維持します。

これは、Plunker独自のAngular 2セットアップ（Plunkerメニューからアクセスできる：New > AngularJS > 2.0.x (TS)

欠点：その設定はTypeScriptであるため、Vanilla Javascript（ES5またはES6）で開発する場合は、代わりにPlunkerメニューオプションを使用することをお勧めします。

8
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を構成し、bootstrap関数を含むメインモジュールをインポートする必要があります。

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