import - Hvordan bruke Angular2 og Typescript i Jsfiddle

Dummy-spørsmål ...
Jeg prøver å kode en Angular2 (2.0.0-beta.6) app i Typescript i jsfiddle.
Jeg vet at det finnes andre løsninger på nettet, men ...
Faktisk er eksemplet mitt veldig lite, og problemet ligger i importmodulen:

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';

Jeg fikk følgende feil:

Uncaught ReferenceError: System is not defined
Uncaught ReferenceError: require is not defined

Jeg prøver å legge til noen avhengigheter (require, system ...) men det fungerer ikke.
Og det finnes ikke lenger en Self-Executing bundle for nyere versjon (beta-6) av Angular2 (angular2.sfx.dev.js).

Noen tester :
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/

Svar #1

I Plunker kan du bare bruke menyen

New > Angularjs > 2.0.x (TS)

å få en minimal fungerende Angular2-applikasjon

Ruter

Hvis du vil bruke ruteren, legg den til i config.js

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

<base href="."> som første barn i <head> i index.html kan også være nødvendig.

For å bytte til HashLocationStrategy, endre main.ts fra

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

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

til

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

Svar #2

Hvis du ikke er bundet til JS Fiddle, vurder Plunker i stedet. Angular-utviklerne holder et enkelt arbeidsområde oppdatert med nye Angular-utgivelser på denne lenken.

Det er mer oppdatert enn selv Plunkers egen Angular 2-oppsett (som du kan få tilgang til fra Plunker-menyen: New > AngularJS > 2.0.x (TS)

Ulempen: den oppsettet er i TypeScript, så hvis du ønsker å utvikle med vanlig Javascript (ES5 eller ES6), er ditt beste valg å bruke Plunker-menyvalget i stedet.

Relaterte artikler