...
- prebuild (exécuté automatiquement avant build) :
npm run module:build-all=> va compiler les différents modules Angular présents dans le dossierprojects/et les placer dans un dossierdist/ - build :
ng build=> va compiler l'app Angular et les assets associés présents dans le dossiersrc/et les placer dans un dossierwww/
Build
...
des apps
Build appli web
Il n'y a rien de plus à faire à ce niveau car les fichiers compilés nécessaires au fonctionnement de l'application web ont été buildés via la commande npm run build ci-dessus.
Build
| Avertissement | ||
|---|---|---|
| ||
Ecrire la doc ! |
...
Android
Ajouter le support d'Android
Pour ajouter le support d'Android au projet, il est nécessaire d'exécuter la commande suivante :
...
| Remarque |
|---|
Cette commande n'est à exécuter qu'une seule fois sur le projet. Elle permet d'initier les fichiers nécessaires au build d'une app Android |
Copier les sources
Pour ajouter les assets et sources du projet compilés, il est nécessaire d'exécuter la commande suivante :
...
Cette commande va copier les fichiers de l'app Angular compilés dans le dossier android/ (équivalent de la commande npx capacitor copy android) en plus de faire correspondre les différents plugins Capacitor mis en place sur le projet avec les différentes fonctionnalités natives Android.
Ajout des autorisations et personnalisation du Manifest
| Avertissement | ||
|---|---|---|
| ||
Ecrire la doc ! |
Tester l'app Android
Ouvrir ensuite le projet dans Android Studio via la commande suivante :
| Bloc de code |
|---|
$ npx capacitor open android |
| Avertissement | ||
|---|---|---|
| ||
Build
...
iOS
| Avertissement |
|---|
| Les tests sur périphérique iOS externe ou même émulateur ne sont possible que depuis une machine tournant sur macOS (nécessite l'utilisation de XCode) |
Ajouter le support d'iOS
Pour ajouter le support d'iOS au projet, il est nécessaire d'exécuter la commande suivante :
...
| Remarque |
|---|
Cette commande n'est à exécuter qu'une seule fois sur le projet. Elle permet d'initier les fichiers nécessaires au build d'une app iOS |
Copier les sources
Pour ajouter les assets et sources du projet compilés, il est nécessaire d'exécuter la commande suivante :
...
Cette commande va copier les fichiers de l'app Angular compilés dans le dossier ios/ (équivalent de la commande npx capacitor copy ios) en plus de faire correspondre les différents plugins Capacitor mis en place sur le projet avec les différentes fonctionnalités natives iOS.
Ajout des autorisations et personnalisation du Manifest
| Avertissement | ||
|---|---|---|
| ||
Ecrire la doc ! |
Générer les splashscreens et les icônes
Les icônes et le splashscreens se trouvent par défaut dans /dev/user-frontend-ionic/src/theme/default/resources
Pour les ajouter dans les app natives Android et iOS, il est nécessaire d'exécuter la commande suivante :
| Bloc de code |
|---|
$ npx capacitor-assets generate --assetPath src/theme/default/resources |
Tester les apps
Tester l'app Web
| Avertissement | ||
|---|---|---|
| ||
Ecrire la doc ! |
Tester l'app
...
Android
Ouvrir ensuite le projet dans XCode Android Studio via la commande suivante :
| Bloc de code |
|---|
$ npx capacitor open iosandroid |
| Avertissement | ||
|---|---|---|
| ||
|
Logo et spashscreen
| Avertissement | ||
|---|---|---|
| ||
Rebasculer la génération du splashscreen et logo dans les builds d'app natives |
Installer Capacitor Assets (https://github.com/ionic-team/capacitor-assets) avec la ligne de commande :
| Bloc de code |
|---|
npm install --save-dev @capacitor/assets |
Le logo et le splashscreen se trouvent par défaut dans /dev/user-frontend-ionic/src/theme/default/resources
Lancer la commande
Tester l'app iOS
Ouvrir ensuite le projet dans XCode via la commande suivante :
| Bloc de code |
|---|
$ npx capacitor open ios |
| Avertissement | ||
|---|---|---|
| ||
| ||
| Bloc de code | ||
| cd /dev/user-frontend-ionic
npx capacitor-assets generate --assetPath /src/theme/default/resources |