Using Ionic Elements in Monorepo Library in Template causes Application level "No provider for ChangeDetectorRef" Error

user_212215 0
Viewed 152

I'm trying to migrate to a monorepo structure for my Ionic 5 projects. In order to re-use my Ionic / Angular components and services across several projects in this monorepo, I'm trying to separate them out into shared libraries. Everything was going fine until I actually tried to use ionic elements (e.g. ion-list, ion-button, ion-item, etc) in the templates of my shared library components. The moment I do that I start getting runtime errors (no build time errors, mind you) of this nature:

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

I've created a minimal reproducible example and put it up on GitHub here: https://github.com/vicatcu/devdacticMulti/tree/routing-problem

Clone it, then in the root directory run the following:

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

... and it will launch a web browser and in the dev tools console everything will be fine. If you navigate to /ref instead of /lazy you will get the exception that I am referring to. If the template in libraries/academy-lib/src/lib/academy-lib.component.ts does not contain any ionic elements, that page too will load without errors.

For what it's worth I was following along with https://devdactic.com/ionic-multi-app-shared-library to get to this point. What am I missing?

monorepo ionic5 ionic-framework angular
1 Answers

So after many trials and tribulations, this turned out to be some kind of node modules linking problem. The solution was to delete node_modules folders from the root and from all sub-directories, then integrate the dependencies and dev-dependencies from the sub-projects into the package.json file at the root of the monorepo and npm install. Then through the magic of npm node_modules resolution, everything works out.

user_2122150
Related