web-dev-qa-db-fra.com

Développement sur Angular2 avec TS mais sans NPM

Tous les guides suggèrent d'installer npm, mais je cherche un moyen sans cela.

Des fichiers Angular2 sont disponibles , mais aucun d'entre eux n'est du code TypeScript.

Alors, que dois-je faire? Ai-je besoin Angular2.ts ou spécifique Angular2-xx.js et .d.ts des dossiers?

MISE À JOUR: j'ai téléchargé Angular2 à NPM et a obtenu l'arborescence source complète, dans laquelle il est difficile de trouver des choses spécifiques. À la recherche de .d.ts pour Angular2 n'a renvoyé aucun résultat. Beaucoup de .ts et .d.ts les fichiers sont dans l'énorme collection de code.

javascriptangulartypescriptnpm
22
Arman Hayots

En fait, ces fichiers sont une version groupée d'Angular2 et de ses dépendances. Ils peuvent être utilisés dans une application écrite avec TypeScript. En fait, TypeScript ne peut pas être utilisé par défaut dans les navigateurs. Vous devez les prétraiter pour les compiler en code ES avec le compilateur TypeScript ou les transpiler directement dans le navigateur avec la bibliothèque TypeScript.

Cela peut être configuré directement dans SystemJS via son attribut de configuration transpiler (voir ci-dessous).

Ajoutez simplement ces fichiers dans votre fichier HTML:

<script src="https://code.angularjs.org/2.0.0-beta.2/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.2/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script>

Si vous souhaitez implémenter une application sans NPM, vous pouvez transpiler vos fichiers TypeScript dans le navigateur, comme nous le faisons lorsque vous utilisez plunkr. Pour cela, vous devez configurer SystemJS comme décrit ci-dessous:

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

Veillez à définir vos fichiers TypeScript sous un dossier app

Voici un plunkr simple (et complet) décrivant comment faire cela: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info .

Vous pouvez télécharger le code correspondant et utiliser son code localement avec un serveur HTTP statique comme http-server Sans utiliser NPM. Cela pourrait être un bon point de départ pour votre cas d'utilisation ...

Modifier

Si vos fichiers TypeScript sont compilés par VS, vous devez adapter la configuration SystemJS, comme décrit ci-dessous:

<script>
  System.config({
    packages: {
      app: {
        defaultExtension: 'js',
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

De cette façon, SystemJS chargera vos fichiers JS lors d'une importation. Par exemple: System.import('app/boot') utilisera le app/boot.js Et non celui de TypeScript

11
Thierry Templier