Comment utiliser Angular2 et Typescript dans Jsfiddle
Question fictive ...
J'essaie de coder un angular2 (2.0.0-bêta.6) application à la Machine dans jsfiddle.
Je sais qu'il y a d'autres solutions en ligne mais ...
En fait, mon exemple est très petit et que le problème est sur le module d'importation :
import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
j'ai l'erreur suivante :
Uncaught ReferenceError: System is not defined
Uncaught ReferenceError: require is not defined
j'essaie d'ajouter quelques dépendances (require, system ...) mais il ne fonctionne pas.
Et il n'y a plus de bundle auto-exécutable pour version récente (bêta-6) D'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/
3 réponses
dans Plunker vous pouvez simplement utiliser le menu
New > Angularjs > 2.0.x (TS)
pour obtenir une application Angular2 de travail minimale
Routeur
Si vous souhaitez utiliser le routeur ajouter config.js
'@angular/router': {
main: 'router.umd.js',
defaultExtension: 'js'
},
<base href="."> comme premier enfant dans le <head>index.html peut-être nécessaire.
pour passer à HashLocationStrategy modifier 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));
Si vous n'êtes pas lié JS Fiddle, envisagez de Plunker à la place. Les devs angulaires maintiennent un espace de travail nu à jour avec de nouvelles versions angulaires à ce lien.
Il est plus courant que même Plunker propre Angulaire 2 de l'installation (à laquelle vous pouvez accéder à partir de la Plunker menu: New > AngularJS > 2.0.x (TS)
le mauvais côté: cette configuration est en TypeScript, donc si vous souhaitez développer avec JavaScript (ES5 ou ES6), votre meilleur pari est d'utiliser l'option de menu Plunker à la place.
vous devez aussi inclure le fichier SystemJS js. J'ai vu que vous l'avez manqué. Tous ces inclusions 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 aussi configurer SystemJS avec le code suivant et ensuite importer votre module principal contenant la fonction bootstrap:
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'app': {
defaultExtension: 'ts'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));