Il y a plusieurs moyens de démarrer un projet Angular, certains sont plus rapides que d’autres. Par exemple, le projet Angular CLI vous permet de mettre en place un projet avec une seule ligne de commande ! Cependant, je préfère partir d’un dossier vide, pour que vous puissiez voir le processus de création en entier.

Le fichier package.json

Ce fichier doit vous être familier : il permet de décrire les dépendances d’un projet pour le Node Package Manager.

Note: Le lien apparaissant dans la vidéo ne fonctionne plus, car Google a arrêté son service de raccourcisseur d’urls… Mais le fichier package.json est toujours accessible ici. 👈

Il y a trois parties intéressantes à remarquer dans ce fichier package.json:

  1. Les scripts: un certain nombre de scripts prédéfinis sont listés à partir de la ligne 5. Par exemple, start permet de démarrer notre application et lite permet de démarrer un mini-serveur sur lequel tournera notre application Angular. Nous verrons comment utiliser certaines de ces commandes un peu plus tard dans ce chapitre.
  2. Les dépendances: A partir de la ligne 25, apparaît une liste de toutes les dépendances de notre application. Par exemple, @angular/router a pour vocation de gérer les routes de notre application, et @angular/forms gère les formulaires.
  3. Les dépendances relatives au développement: Ces dépendances sont listées à partir de la ligne 41, et concernent les dépendances dont nous n’aurons plus besoin quand notre application sera terminée. Par exemple, Typescript (ligne 44) ne sera plus nécessaire une fois l’application terminée, étant donné que le navigateur ne pourra pas l’interpréter : le navigateur interprétera uniquement le JavaScript qui a été généré depuis le TypeScript compilé.

Si vous avez le temps, vous pouvez retrouver toutes les explications détaillées, ligne par ligne, de ce fichier, dans la documentation officielle sur le sujet.

Angular5 nécessite au minimum la version ~2.4.2 de TypeScript. C’est bien cette version que nous avons renseigné dans le fichier package.json.

8. Configurer un mini-serveur de développement

2 commentaires

  1. Le lien concernant le fichier package.json ne s’affiche pas . la page affiche un message comme: dynamic link not found …

    1. Bonjour, merci beaucoup pour votre retour. 🙏 Apparemment, Google a arrêté le support de son service de raccourcisseur d’urls. J’ai donc ajouté une note avec le bon lien dans le texte sous la vidéo, et mis à jour les ressources du cours. En bonus, le package.json avec les dépendances pour Angular 8 est disponible. 😉Excellent apprentissage, et n’hésitez pas si vous avez des questions, Simon.

Laisser un commentaire