Démarrer l’application va être un jeu d’enfant. Il y a déjà une commande disponible pour nous permettre de démarrer l’application. Ouvrez donc un terminal qui pointe vers le dossier de votre projet, et taper la commande suivante :

npm start

Vous devriez voir des choses qui s’affichent dans la console, puis après un délai de quelques secondes, votre navigateur s’ouvre tout seul, et vous voyez affiché le message « Hello, Angular ! » dans votre navigateur !

Ca y est, nous y sommes arrivés !

Pour couper la commande npm start, appuyer sur CTRL + C. En effet, cette commande tourne en continu puisque qu’elle permet de démarrer le serveur, qui s’occupe d’envoyer l’application au navigateur !

Alors je sais, tout ça pour ça !

Mais rassurez-vous, vous venez de faire quelque chose propre à beaucoup de Framework: installer le socle de notre application. Vous avez fait plus qu’afficher un message à vos utilisateurs, vous venez de mettre en place l’architecture de votre application, et ça, ça n’a pas de prix ! 🙂

Mais revenons à la commande npm start, car sous des airs modestes, cette petite commande accomplit un travail important:

  1. Elle compile tous nos fichiers TypeScript vers du JavaScript.
  2. Elle lance l’application dans un navigateur, et la met automatiquement à jour si nous modifions notre code !

Dans les librairies que nous avons installées au début de ce chapitre, BrowserSync s’occupe de mettre à jour notre application à chaque fois que nous modifions son code source, sans avoir à appuyer sur F5 !

Testons ça tout de suite, ouvrez le fichier de votre composant app.component.ts, et modifiez son code comme indiqué dans la vidéo.

Si maintenant vous retournez dans le navigateur ou tourne votre application, vous verrez maintenant le message « Bonjour, Angular ! » s’afficher, à la place de « Hello, Angular !« , le tout sans avoir à rafraîchir votre navigateur !

Pour que votre application soit mise à jour automatiquement, laissez la commande npm start tourner en continu pendant vos développements !

NOTE: Si vous utilisez Chrome et que l’extension AdBlock est activée, il se peut que votre application affiche une simple page blanche.

Pour remédier à ce problème, il suffit de désactiver l’extension AdBlock lorsque vous développez sur votre machine. De toute façon, vous n’avez pas besoin de cette extension pour vos sites locaux, qui n’affichent pas de publicités normalement. 😀

17. Nettoyer notre code

2 commentaires

  1. Voici les errers au premier démarrage :
    npm start

    > ng-pokemon-app@1.0.0 prestart G:\dev\pokemon-app
    > npm run build

    > ng-pokemon-app@1.0.0 build G:\dev\pokemon-app
    > tsc -p src/

    ‘tsc’ n’est pas reconnu en tant que commande interne
    ou externe, un programme exécutable ou un fichier de commandes.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! ng-pokemon-app@1.0.0 build: `tsc -p src/`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the ng-pokemon-app@1.0.0 build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\ft\AppData\Roaming\npm-cache\_logs\2018-11-17T22_41_56_671Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! ng-pokemon-app@1.0.0 prestart: `npm run build`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the ng-pokemon-app@1.0.0 prestart script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\ft\AppData\Roaming\npm-cache\_logs\2018-11-17T22_41_56_794Z-debug.log

  2. Bonjour,
    Apparemment, il vous manque la dépendance à TypeScript (‘tsc’ est en fait le compilateur de typescript).

    Je vous propose donc à lancer la commande à la racine de votre projet :
    npm install typescript@~2.7.2

    Est-ce que ensuite l’installation des dépendances fonctionne sur votre machine ?

    Simon.

Laisser un commentaire