Ionic 3: Résoudre les problèmes d'Assets
19 septembre 2017Avec Ionic 3, tout fonctionne quand vous travaillez en local (ionic serve) mais dès que vous travaillez sur device, une belle erreur "fichier non trouvé" apparaît. Je me suis penché sur le sujet et vous explique ce que j'ai compris ainsi que la solution pour y remédier.
En local !
Vous développez votre application et vous êtes content car tout fonctionne en local (à l'aide de la commande ionic serve --lab
). Vous êtes donc rassuré et continuez le développement.
Arrive le moment où vous devez tester sur votre device à l'aide de la commande ionic cordova run android
et bam, là, tout va mal !
J'ai des erreurs "FILE_NOT_FOUND"
Dans la console de Chrome, vous avez une erreur du genre:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///assets/i18n/fr.json
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///assets/images/logo.png
Que se passe t-il?
Et bien, le chemin que vous avez défini dans votre appli est relatif à un mauvais point d'ancrage !
Une fois l'application compilée et déployée dans le mobile, les Assets se trouvent dans le répertoire file:///android_asset/www/assets/
.
Le point d'ancrage des chemins relatifs dans votre application est file:///android_asset/www/
. Lorsque vous définissez vos ressources, vous devez donc le prendre en compte.
La solution
Ainsi, lorsque vous utilisez des ressources (Images, icones, fichiers de langues...) dans votre application, vous devez définir un chemin relatif au point d'ancrage, et non au répertoire où se situe le template. Ce qui donne:
Pour les images:
<!-- Il n'y a pas de ../ devant assets -->
<img src="assets/images/logo.png" class="logo"/>
Pour les fichiers de langues (Utilisant Http Loader):
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "assets/i18n/"); // le préfixe "assets/i18n/" a été ajouté
}
On obtient le résultat suivant:
Un peu plus loin !
Pour débugguer ce genre d'erreur, la console est un bon outil. Dans l'onglet Sources, on a la possibilité de voir l'arborescence de notre application sur device.
Pour lancer celle ci, il faut éxécuter la commande suivante dans la barre de recherche de Chrome: chrome://inspect/#devices
Les erreurs suivantes ne sont pas propres à Ionic mais plutôt à Cordova. On peut donc les retrouver sur des applications embarquant Cordova.
En espérant que ce post vous a été utile.
A plus pour le prochain article.
Article précédent Article suivant
Ajouter un commentaire