EXAMPLE: Integration StencilJS Web Component in Ionic App

Stencil
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):

  1. Like describe above, the CUSTOM_ELEMENTS_SCHEMA need to be declared

  2. In app.modulte.ts an import should be added, like

    import 'my-component/dist/mycomponent';

  3. 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**/*'],
     dest: '{{BUILD}}'
}

UPDATE

@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/

2 Likes