Comment créer une page avec Ionic 3 sans se perdre entre les versions ?

Pourquoi la création d’une page n’est pas la même entre Ionic 3 et Ionic 4 ?

Quand on cherche comment créer une page avec Ionic, on tombe vite sur des exemples qui mélangent plusieurs générations du framework. Et c’est souvent là que la confusion commence. Avec Ionic 4 et les versions suivantes, la logique tourne largement autour du routage Angular. Avec Ionic 3, on est encore dans un fonctionnement très lié aux pages, à la navigation par NavController et, selon le projet, au lazy loading. Dit autrement : le nom de la commande peut se ressembler, mais le résultat attendu n’est pas exactement le même.

Si votre projet tourne encore sous Ionic 3, le plus simple est de rester sur une approche pratique. Le but n’est pas de relire toute la doc Angular de l’époque, mais de créer une page proprement, savoir quels fichiers sont générés et comprendre à quel moment il faut encore faire un peu de configuration à la main. Si vous avez besoin d’un rappel plus large sur la structure du framework, vous pouvez aussi jeter un œil à cet article sur Ionic, qui aide à remettre les bases dans le bon ordre.

Quelle commande utiliser pour générer une page Ionic 3 ?

ionic g page Contact
ionic generate page Dashboard

Dans un projet Ionic 3, la commande la plus directe reste :

ionic generate page ma-page

Vous pouvez aussi utiliser la version courte :

ionic g page ma-page

Cette commande crée généralement un dossier dédié dans src/pages/ma-page/ avec plusieurs fichiers :

• ma-page.html pour le template,
• ma-page.scss pour le style,
• ma-page.ts pour la logique de la page,
• ma-page.module.ts pour le module associé.

C’est un détail important, parce que c’est justement l’un des points qui déroute quand on passe d’un tutoriel Ionic 4 à un projet Ionic 3. Sous Ionic 3, la génération de page s’inscrit dans une logique où chaque page peut embarquer son propre module. Ce n’est pas juste un écran ajouté au hasard dans l’application.

Concrètement, si vous lancez la commande suivante :

ionic g page contact

vous obtenez une page ContactPage prête à être ouverte depuis la navigation. C’est la méthode la plus propre pour éviter les oublis de fichiers ou les erreurs de nommage. Franchement, faire ça à la main n’apporte pas grand-chose, sauf si vous aimez corriger des imports pendant vingt minutes.

Que contient une page générée dans Ionic 3 ?

Une fois la commande exécutée, le fichier TypeScript ressemble en général à une classe simple avec un sélecteur, un template et parfois un constructeur injectant NavController ou NavParams. Le cœur du travail se fait ensuite dans trois zones.

D’abord le HTML. C’est là que vous posez votre structure avec les composants Ionic comme ion-header, ion-navbar, ion-content ou encore les listes et formulaires. Ensuite le SCSS, pratique pour styler uniquement cette page sans tout mélanger dans les styles globaux. Enfin le fichier .ts, où vous gérez les données, les méthodes et les actions utilisateur.

Un exemple très simple de contenu peut ressembler à ça :

<ion-header>
  <ion-navbar>
    <ion-title>Contact</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Ma nouvelle page Ionic 3 fonctionne.</p>
</ion-content>

Ce n’est pas spectaculaire, mais c’est suffisant pour valider que la génération est correcte et que la page s’affiche bien. À ce stade, le bon réflexe consiste à tester tout de suite plutôt que d’enchaîner plusieurs modifications sans vérifier la base.

Faut-il déclarer la page manuellement dans le projet ?

this.navCtrl.push('ContactPage')
// ou selon le projet
this.navCtrl.push(ContactPage)

La vraie réponse, c’est : ça dépend de l’organisation de votre application Ionic 3. Si vous utilisez le lazy loading tel qu’il était courant sur Ionic 3, la page générée avec son fichier ma-page.module.ts peut vivre de manière autonome, et vous l’ouvrirez souvent avec :

this.navCtrl.push('MaPage');

Dans certains projets plus anciens, ou dans des projets qui n’ont pas été structurés autour du lazy loading, il faut encore déclarer la page dans app.module.ts et parfois dans entryComponents. C’est typiquement le genre de détail qui fait perdre du temps, parce qu’on suit un tutoriel correct… mais pour une autre version d’Ionic ou une autre architecture de projet.

Le plus sûr est donc de regarder comment les pages déjà présentes dans votre application sont branchées. Si elles ont chacune leur module et une navigation par nom, gardez la même logique. Si tout est centralisé dans app.module.ts, ne partez pas dans une structure hybride. Mélanger les deux approches dans un vieux projet, c’est souvent le meilleur moyen d’obtenir une page qui compile mal ou qui ne s’ouvre jamais au bon moment.

Comment ouvrir la nouvelle page dans Ionic 3 ?

Créer la page ne suffit pas, il faut aussi l’appeler. Dans Ionic 3, on passe souvent par NavController. Depuis une page existante, on peut par exemple écrire :

this.navCtrl.push(ContactPage);

ou, dans un contexte lazy loaded :

this.navCtrl.push('ContactPage');

Là encore, il faut rester cohérent avec le reste du projet. Si vos autres écrans utilisent une classe importée, copiez ce modèle. Si l’application navigue par chaîne de caractères, faites pareil. Ce n’est pas la partie la plus moderne d’Ionic, mais sur Ionic 3, c’est encore la mécanique normale.

Pour aller un peu plus loin sur les bonnes pratiques autour des pages et de l’organisation d’un projet, vous pouvez aussi lire ce contenu complémentaire. Il complète bien l’approche purement CLI et évite de traiter la génération de page comme une commande isolée sortie de son contexte.

Les erreurs les plus fréquentes quand on crée une page Ionic 3

La première erreur consiste à suivre un tutoriel Ionic 4 ou 5 en pensant que cela fonctionnera pareil. En général, non. Vous vous retrouvez avec des histoires de routing, de dossiers différents ou d’imports qui ne correspondent pas à votre projet.

La deuxième erreur, plus discrète, c’est de générer la page correctement puis de l’intégrer selon une autre logique que celle déjà utilisée dans l’application. Une app Ionic 3 ancienne a souvent son historique, ses choix techniques et parfois ses petites bizarreries. Il vaut mieux respecter cet existant que vouloir moderniser un seul écran au passage.

Enfin, beaucoup de blocages viennent d’un détail banal : un nom de page pas cohérent, un import oublié, ou une navigation écrite dans le mauvais format. Quand une page ne s’ouvre pas, le problème n’est pas toujours la commande ionic g page. Le souci apparaît souvent juste après, au moment où on raccorde la page au reste de l’application.