web-dev-qa-db-fra.com

Comment utiliser Angular2 et TypeScript dans Jsfiddle

Question factice ...
J'essaie de coder une application angular2 (2.0.0-beta.6) dans TypeScript dans jsfiddle.
Je sais qu’il existe une autre solution en ligne mais ...
En fait, mon exemple est très petit et le problème concerne le module d'importation: 

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

J'ai eu l'erreur suivante: 

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

J'essaie d'ajouter des dépendances (require, system ...) mais cela ne fonctionne pas.
Et il n’existe plus de paquet auto-exécutable pour la version récente (beta-6) de Angular2 (angular2.sfx.dev.js).

Quelques tests:
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
18
asicfr

Dans Plunker, vous pouvez simplement utiliser le menu 

New > Angularjs > 2.0.x (TS)

obtenir une application de travail minimale Angular2 

Routeur

Si vous voulez utiliser le routeur, ajoutez config.js

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

<base href="."> en tant que premier enfant dans le <head> de index.html pourrait également être nécessaire.

Pour passer à HashLocationStrategy changer main.ts de

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

Si vous n'êtes pas lié à JS Fiddle, considérez plutôt Plunker. Les Angular - devs gardent un espace de travail dépouillé avec les nouvelles Angular - versions à ce lien .

Il est plus courant que même la propre configuration de Plunker Angular 2 (à laquelle vous pouvez accéder à partir du menu Plunker: New > AngularJS > 2.0.x (TS)

L'inconvénient: cette configuration est en TypeScript, donc si vous souhaitez développer avec Javascript Javascript (ES5 ou ES6), il vaut mieux utiliser l'option de menu Plunker à la place.

8
BeetleJuice

Vous devez également inclure le fichier SystemJS JS. J'ai vu que tu l'as manqué. Tous ces inclus sont nécessaires:

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

Vous devez également configurer SystemJS avec le code suivant, puis importer votre module principal contenant la fonction d'amorçage:

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