Как использовать Angular2 и Typescript в Jsfiddle

Фиктивный вопрос...
Я пытаюсь закодировать приложение angular2 (2.0.0-beta.6) в Typescript в jsfiddle.
Я знаю, что есть другое решение онлайн, но... На самом деле мой пример очень мал, и проблема связана с модулем импорта:

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...), но это не работает.
И больше нет пакета самоизготовления для последней версии (бета-6) angular2 (angular2.sfx.dev.js).

Некоторые тесты:
  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/

Ответ 1

В Plunker вы можете просто использовать меню

New > Angularjs > 2.0.x (TS)

чтобы получить минимальное рабочее приложение Angular2

маршрутизатор

Если вы хотите использовать маршрутизатор add в config.js

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

<base href=".">, поскольку первый ребенок в <head> of 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));

Ответ 2

Если вы не привязаны к JS Fiddle, рассмотрите Plunker. Разработчики Angular постоянно обновляют рабочее пространство с новыми выпусками Angular на этой ссылке.

Это более актуально, чем даже установка Plunker Angular 2 (доступ к которой вы можете получить из меню Plunker: New > AngularJS > 2.0.x (TS)

Недостаток: эта настройка находится в TypeScript, поэтому, если вы хотите разработать с помощью ванильного Javascript (ES5 или ES6), лучше всего использовать опцию меню Plunker.

Ответ 3

Вам также необходимо включить файл JS SystemJS. Я видел, что ты пропустил это. Все это включает в себя:

<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));