text: EXAMPLE: Integration StencilJS Web Component in Ionic App - Stencil - Ionic Forum
  EXAMPLE: Integration StencilJS Web Component in Ionic App
  adrian_brito September 20, 2017, 11:58am #1
  In case it's helpful, I created an example of integrating a web component built with StencilJS into an Ionic APP.
  Integration: https://github.com/abritopach/ionic-test-stencil-web-component
  Stencil Web Component: https://github.com/abritopach/stencil-counter
  gillestasse October 5, 2017, 10:25am #2
  It is great but could you also share how you set it up ?
  adrian_brito October 6, 2017, 7:14am #3
  Hi @gillestasse!
  To create new components in StencilJS:
  git clone https://github.com/ionic-team/stencil-app-starter app-name
  Stencil components are created by adding a new file with a .tsx extension.
  Modify existing project code or create your new component. Follow the official documentation if you have any questions.
  Once you have tested build for production with
  This will generate a minified distribution of your stencil component in build folder.
  Integrate Web Component in Ionic
  In your Ionic project copy web componet build folder in src/assets/lib (for example).
  In src/app/app.module.ts
  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  Add schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  import { CounterWrapperComponent } from '../components/counter-wrapper/counter-wrapper';
  CounterWrapperComponent
  Use your web component in page (for example home.ts)
  Stencil WC Ionic
  <counter-wrapper>
  <my-counter start="10" min="0" max="100" step="5"></my-counter>
  </counter-wrapper>
  gillestasse October 6, 2017, 2:00pm #4
  Perfect. Thank you ! I am gonna dive into it right now !
  reedrichards January 31, 2018, 9:33pm #5
  I just gonna let that here because, at least for me now, the way to import the component built with Stencil into Ionic was a bit different
  First there is a description of what to do with angular on the official StencilJS website https://stenciljs.com/docs/framework-integration
  What I did in case of Ionic (after having build and installed the component, named "my-component" in my case):
  Like describe above, the CUSTOM_ELEMENTS_SCHEMA need to be declared
  In app.modulte.ts an import should be added, like
  import 'my-component/dist/mycomponent';
  The component lib installed under node_modules not gonna be included in the vendor.js file. Therefor it need to be copied. To do so, I have overwritten copy.config.js from app-scripts and add a the copyMyComponent block like following
  copyMyComponent: {
  src: ['{{ROOT}}/node_modules/my-component/dist/mycomponent**/*'],
  @AaronSterling describe nicely, in his component's README, all the steps needed to include a component in an Ionic project https://forum.ionicframework.com/t/stencil-importing-stencil-components-into-ionic-angular/
  [Stencil] Importing Stencil components into Ionic-Angular
  [Stencil] Publishing a Stencil component to npm
  AaronSterling February 8, 2018, 8:29pm #6
  So you don't need to add a <script> to index.html?
  reedrichards February 8, 2018, 8:43pm #7
  Exactly I don't have too, I guess the import is the tricks
  Furthermore I could add that I tested till the end respectively ionic build iOS --prod and ran the app on my (real) phone. Maybe I was just lucky
  AaronSterling February 10, 2018, 5:48am #8
  I think I've come up with a small improvement. I added two build instructions to copy.config.js, instead of pushing everything into copySwToolbox. Writeup here.
  reedrichards February 10, 2018, 7:33am #9
  Cool @AaronSterling thx for the input, you are right, adding a block and not modifying an existing one is cleaner
  I have modified my above post, own component and project
  reedrichards February 10, 2018, 12:40pm #10
  I gonna link my issue here because I think it might be related to the way I import the component into my project. Long story short, it works locally, on iPhone, on Android 6 but doesn't on my Android 8.1 device
  https://forum.ionicframework.com/t/stencil-error-on-nexus-5x-android-8-1-only/?source_topic_id=106083
  emonfort July 23, 2018, 6:55pm #11
  Do you think for a large mobile app would be necessary using a framework or we can just go with ionic components and write our own page components with stencil?
  awin December 7, 2018, 7:38am #12
  The integration has been updated in the latest StencilJS docs. Refer to Framework Integration, angular for integrating it in Ionic Angular app. LInk https://stenciljs.com/docs/angular.
  Instead of importing the component directly, import a loader and call defineCustomElements(window) from main.ts