Comment bâtir une application native avec Angular

Electron est un framework qui permet de bâtir des applications natives à partir de code HTML, CSS et JavaScript. Ce qu’il y a d’intéressant avec ce framework, c’est lorsqu’on le combine à Angular. On a alors la possibilité de livrer une application native, peu importe le système d’exploitation, à l’aide d’outils solides comme Angular.

C’est donc ce sujet que j’aimerais explorer avec vous. Aujourd’hui, on va voir comment on peut compiler une application faite avec Angular en un exécutable sur Windows, Mac ou Linux.

Electron

Electron bundle votre application avec Chromium. L’utilisateur se retrouve donc avec une copie bien précise à une version toute aussi précise d’un navigateur en mesure de lire votre application. Ça règle donc plusieurs problèmes de compatibilité.

Avant d’utiliser une librairie, il faut toujours prendre son pouls au niveau du développement. Je vous conseille de regarder les étoiles GitHub, les bogues ouverts, le nombre de téléchargements hebdomadaires sur npm, etc.. Je prends la peine de spécifier, parce qu’Electron date quand même de 2013, mais il est encore aussi populaire et effervescent.

VS Code, Discord, Skype et Atom sont des exemples d’applications bâties sur Electron.

Angular

Je considère que vous avez au moins des bases avec Angular et son « cli ».

NOTE : Avec la version 8 d’Angular, ils ont mis en place une compilation vers des modules ES6 qui ne peuvent pas être chargés par le protocole file://. J’utilise donc Angular 7 pour cette démo.

Traditionnellement, Angular tourne sur un serveur http standard, comme Apache. Lorsqu’on accède à l’application, le serveur retourne le code HTML et JavaScript, puis son rôle s’arrête là. Tant que vous ne rafraîchissez pas la page, vous ne retournerez pas sur ce serveur.

Angular est donc très bien placé pour être un choix incontournable pour une application native avec Electron, puisque les artefacts produits ne sont que du HTML, CSS et JavaScript.

Créons donc une application avec Angular Cli :

Pour que les fichiers JavaScript soient bien chargés par Angular, il faut modifier le base href dans index.html en ajoutant un « . » devant le « / » :

Je vous conseille aussi de l’installer globalement, pour y avoir accès de n’importe où :

Le cas du main.js dans Electron

Dans le contexte d’une application Angular, il faut savoir qu’il existe un main.ts à la racine du projet. Dans les exemples sur Electron en ligne, ils utilisent souvent main.js comme fichier de départ Electron, mais ça va nous causer du trouble… appelons-le… launch.js :

Ceci chargera le fichier index.html comme page principale. Ensuite, il faut configurer notre package.json pour exécuter notre fichier launch.js avec Electron. Définir la propriété main, puis un script :

Si vous exécuter le nouveau script ( npm run electron-build), on se retrouve avec :

Compilation en exécutable

Pour cette dernière étape de ce mini tutoriel, nous aurons besoin d’une autre librairie, soit electron-packager. Cette dernière sert à faire l’exécutable en tant que tel.

npm i electron-packager -g

Puis, à la racine du projet :

Ce compilateur va créer un nouveau répertoire et y déposer tous les fichiers nécessaires à l’application. Il ne vous restera qu’à zipper le tout!

Conclusion

En théorie, si vous êtes sur un autre OS que Windows, vous devriez être en mesure de suivre le tutoriel tel quel et obtenir votre copie compilée pour votre OS. Je vous invite à consulter les OS supportés si vous avez des difficultés.

Donc, aujourd’hui, vous avez appris comment utiliser Angular pour faire des applications natives, sans regard sur l’OS. Comme vous pouvez le constater, Electron n’est pas du tout intrusif! Mis à part le changement du index.html, qui d’ailleurs peut être remplacé par le paramètre --base-href de ng build, le code Electron est 100% indépendant.

Si vous avez apprécié cet article, partagez-le avec vos collègues! Vous êtes notre gaz 🙂

@+