17. Nettoyer notre code

18. Conclusion

Si vous ouvrez votre éditeur de code, vous constatez qu’un certains nombres de fichiers se sont ajoutés dans le dossier app. Il s’agit de fichier *.js et *.js.map. Il s’agit des fichiers compilés par TypeScript et ce sont eux qui sont interprétés par le navigateur. Jusque-là tout va bien.

clean-dev-folder
Le dossier app.

Le problème est que ces fichiers nous gênent, ils polluent notre dossier de développement app et le rendent moins lisible. Je vous propose de mettre tous les fichiers destinés uniquement au navigateur dans un dossier à part, le dossier dist. Les fichiers que nous utilisons pour nos développements (les fichiers TypeScript) resterons dans notre dossier de développement app.

Pour cela, nous allons dire à SystemJS de ne pas cherchez à démarrer l’application depuis le dossier app, mais depuis le dossier dist. Mais avant, nous allons dire à TypeScript de compiler les fichiers vers ce nouveau répertoire, sinon il restera désespérément vide.

Premièrement, créer un dossier dist à la racine de votre application.

Ensuite, nous allons dire à TypeScript de pointer vers dist. Ouvrez le fichier de configuration tsconfig.json et ajoutez la ligne de configuration comme dans la vidéo.

Maintenant, il ne nous reste plus qu’à dire à System.js de démarrer notre application par rapport aux fichiers JavaScript qui se trouvent dans le nouveau dossier dist. Ouvrez le fichier de configuration de System.js nommé system.config.js et modifiez-le comme dans la vidéo.

Désormais relancez la commande npm start. Sans surprise, tout fonctionne comme avant (sinon reprenez les étapes ci-dessus). Si vous ouvrez à nouveau votre IDE favoris, vous constaterez que le dossier dist contient de nouveaux fichiers générés par TypeScript:

cleaned-dev-folder
Le dossier dist.

Parfait, les fichiers destinés au navigateur ne polluent plus notre dossier de développement app. Il ne nous reste plus qu’à supprimer les fichiers suivants dans app, car nous n’en avons plus besoin:

  • app.component.js
  • app.component.js.map
  • app.module.js
  • app.module.js.map
  • main.js
  • main.js.map

Ne vous inquiétez, l’application fonctionnera toujours ! 😉

D’ailleurs si vous ne me croyez pas, aller hop, un petit npm start !

Le nom de dossier ‘dist‘ signifie ‘distribution‘: le contenu de ce dossier est destiné à la production. En effet, une fois que nous aurons finis de développer notre application, nous n’allons pas déployer les fichiers TypeScript, qui seront inutiles pour le navigateur. Nous verrons comment déployer une application Angular sur Internet plus tard dans ce cours.

18. Conclusion

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s