Angular2 & TypeScript importation de node_modules
J'ai eu une application très simple "Bonjour tout le monde" Angular2. J'ai également pris la décision apparemment déraisonnable de travailler avec différentes structures de répertoires entre mon projet dev et le dossier de déploiement final de mon backend printanier.
En raison de cette différence, j'ai eu un problème avec les importations TypeScript et cette ligne a généré 404 erreurs (impossible de trouver la bibliothèque/angular2/core) lorsque j'ai tenté d'ouvrir l'application réelle dans mon navigateur:
import {Component, View} from 'angular2/core';
En résumé, j'ai rajouté le dossier/app pour que tout fonctionne, mais j'ai finalement modifié mes instructions d'importation comme suit:
import {Component, View} from '../node_modules/angular2/core';
Ceci, cependant, s'est avéré provoquer un comportement étrange. Pour une raison quelconque, spécifiant ../node_modules _ dans les chemins de la bibliothèque amène le JS à charger TOUS les fichiers Angular2 à partir de zéro en utilisant des appels ajax pour récupérer chaque fichier individuel à partir de la npm_modules/angular2/ dossier même si cela faisait partie de mon en-tête HTML:
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
Quand j’ai enfin compris ce qui se passait, j’ai retourné la déclaration d’importation à
import {Component, View} from 'angular2/core';
et tout a fonctionné. Angular2 était maintenant complètement chargé à partir de la balise script ci-dessus et aucun fichier n'était chargé par des appels ajax supplémentaires.
Quelqu'un peut-il s'il vous plaît expliquer ce qui est la cause? Je suppose que c'est un comportement normal, mais je ne comprends pas comment fonctionne l'importation et pourquoi la spécification d'un chemin plus détaillé fait une telle différence.
Les règles import de TypeScript suivent la même convention que node.js. Si une importation commence par un point:
import {Something} from './some/path';
Ensuite, il est traité comme un chemin relatif à partir du fichier qui déclare l'importation. Si toutefois c'est un chemin absolu:
import {Component} from 'angular2/core';
Ensuite, il est supposé être un module externe. TypeScript s’engagera dans l’arborescence à la recherche d’un fichier package.json, Puis ira dans le dossier node_modules Et trouvera un dossier portant le même nom que le nom de fichier. importer, puis cherche dans le package.json du module le fichier principal .d.ts ou .ts, puis charge ce fichier ou recherchera un fichier portant le même nom que celui spécifié, ou un index.d.ts ou index.ts Fichier.
Wow, cela semble complexe quand il est écrit, et il y a encore des exceptions là-dedans ... Mais dans l’ensemble, si vous avez déjà travaillé avec node.js auparavant, cela devrait se comporter exactement de la même manière.
Il convient de noter qu’une option de compilateur TypeScript doit être définie pour que les résolutions de frappe fonctionnent de cette manière.
dans tsconfig.json
"moduleResolution": "node"
Maintenant, la deuxième partie de votre question était de savoir comment cela se charge sans utiliser d'appels ajax. C'est une caractéristique de System.js. La balise de script chargée dans le fichier index.html Importe un ensemble qui enregistre l’ensemble angular2 avec System. Une fois que cela est arrivé, le système connaît ces fichiers et les attribue correctement à leurs références. C'est un sujet assez profond mais beaucoup d'informations peuvent être trouvées soit dans le README de systemjs , ou systemjs-builder .