Hello,
I use stencil to create a components lib. Many of my components use ionic components like ion-input, etc…
The problem is that the built files include many (or even all) ionic components.
When I use my “lib” in an existing app (Ionic 4 + Angular) I get an error tab with id "undefined" does not exist because the IonTabs used is the one bundled with my components lib.
Is there a way to exclude ionic components from stencil output, so the main app takes care of loading ionic components ?
Thanks
Anyone found a solution with this issue?
Once the defineCustomElements is called from main.ts it breaks tab functionality.
The issue is with the ion-tabs.entry.js
In Stencil ion-router is used while in ionic/angular ion-router-outlet
when we use IONIC components within a Stencil component it uses ion-router. Which is normal since it is not depended from Angular.
The problem is that in the distribution folder it includes all ionic core components and then our ionic application, which is ionic/angular is not working properly.
Does anyone can suggest a workaround to this?
Ok. I found a workaround. I apologise for the multiple repliea.
In the ionic application just add in your application style sheet file, e.g. globals.scss, the height and width properties of tabs-inner class so that it fills the parent.
Other than that, if one follows the official stenciljs documentation to use the web components with Angular everything works just fine.