L'utilisation de Ionic Elements dans la bibliothèque Monorepo dans un modèle entraîne une erreur au niveau de l'application "No provider for ChangeDetectorRef".

Question

J'essaie de migrer vers une structure monorepo pour mes projets Ionic 5. Afin de réutiliser mes composants et services Ionic / Angular dans plusieurs projets de ce monorepo, j'essaie de les séparer en bibliothèques partagées. Tout se passait bien jusqu'à ce que j'essaie d'utiliser des éléments ioniques (par exemple ion-list, ion-button, ion-item, etc.) dans les modèles de mes composants de bibliothèque partagée. ) dans les modèles de mes composants de bibliothèque partagée. Dès que je fais cela, je commence à obtenir des erreurs d'exécution (pas d'erreurs de construction, remarquez) de cette nature :

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[IonItem -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[IonItem -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!

J'ai créé un exemple minimal reproductible et l'ai mis sur GitHub ici : https://github.com/vicatcu/devdacticMulti/tree/routing-problem

Clonez-le, puis dans le répertoire racine exécutez ce qui suit :

npm install && cd ./libraries/academy-lib/ && npm install && cd ../../projects/appOne && npm install && cd ../../ && npm run appOne

... et cela lancera un navigateur web et dans la console dev tools tout sera parfait. Si vous naviguez vers /ref au lieu de /lazy, vous obtiendrez l'exception à laquelle je fais référence. Si le modèle dans libraries/academy-lib/src/lib/academy-lib.component.ts ne contient pas d'éléments ioniques, cette page aussi se chargera sans erreur.

Pour ce que ça vaut, j'ai suivi l'exemple de https://devdactic.com/ionic-multi-app-shared-library pour en arriver là. Qu'est-ce que j'ai raté ?

Answer 1

Après de nombreux essais et tribulations, il s'est avéré qu'il s'agissait d'un problème de liaison entre modules de nœuds. La solution a été de supprimer les dossiers node_modules de la racine et de tous les sous-répertoires, puis d'intégrer les dépendances et les dev-dependances des sous-projets dans le fichier package.json à la racine du monorepo et de l'installation npm. Ensuite, par la magie de la résolution de npm node_modules, tout fonctionne.