Au delà, de nos compétences sur le développement autour de la vente en ligne et notamment le CMS Prestashop, nous développons des applications mobiles multi-plateformes.

Pour certains projets, nous utilisons donc IONIC couplé à AngularJS comme plateforme de développement d’application mobile. Cela permet de créer un seul code tout en générant des applications sur plusieurs plateforme (Android, IOS, …) qui peuvent être distribuées sur le Play Store, ou l’AppStore.
Cela permet de maintenir un seul code, de diminuer sa maintenance et donc le coût global d’une application mobile.

Le framework IONIC utilise des gabarits de vue dans un format proche de l’HTML comme la balise badge.

Ce framework permet de créer ses propres balises aux comportements spécifiques via des modules appelés « components ». Ces composants sont très pratiques à utiliser car les balises spécifiques ont un « controllers » qui leur permet d’avoir un côté dynamique.

Malheureusement, si nous souhaitons utiliser ce composant dans plusieurs contrôleurs de pages, nous avons une erreur du type « xxxComponent is part of the declaration of 2 module(s) : yyyModule and zzzzModule. Please consider xxxComponent is a higher module that imports yyyModule and zzzzModule. You can also create a new NgModule that exports and includes xxxComponent then import that NgModule in yyyModule and zzzzModule. […] ».

La plateforme de développement mobile IONIC 4 nous indique clairement que l’utilisation d’un composant partagé ne peut pas être effectuée sans utiliser un module de plus haut niveau qui ferait l’appel au composant. Nos contrôleurs ou modules n’auraient plus qu’à utiliser ce nouveau module.

Supposons que vous avez développé un composant nommé « MonComposantComponent ».

Pour cela, il vous suffit de créer un nouveau module que nous appellerons :
composants.module.ts

import { NgModule } from '@angular/core';
import { MonComposantComponent} from './moncomposant.component';

@NgModule({
declarations:[MonComposantComponent],
exports: [MonComposantComponent]
})

export class ComposantsModule{}

Imaginons qu’une de vos page s’appelle MaPage.

Il vous suffit ensuite de vous rendre sur le contrôleur de votre page et de le modifier avec les informations suivantes :

page/ma/ma.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MaPage } from './ma.page';

import { ComposantsModule } from './composants.module'; /* <===== Mettre le nom de votre composant */

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ComposantsModule, /* <===== Mettre le nom de votre composant */
RouterModule.forChild(routes),
],
declarations: [MaPage]
})
export class MaPageModule {}

Il vous suffit d’appliquer ces modifications à toutes les pages qui souhaitent utiliser ce composant.

Merci à Joshua Morony et sa vidéo qui nous a permis de trouver la solution.