Can't integrate Stencil components into Ionic/Angular app

Stencil
1

I’m using Ionic 4, Angular 7, and Stencil 0.17.
All the other posts I found were either out of date or referred me to the Stencil Angular integration guide.
I followed that guide and still get this error:

Uncaught (in promise): Error: Template parse errors:
'analog-clock' is not a known element:
1. If 'analog-clock' is an Angular component, then verify that it is part of this module.
2. If 'analog-clock' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I created a git repository from the dist folder of the Stencil component here:


And imported it into this starter app:

I added the CUSTOM_ELEMENTS_SCHEMA to the app.module.
And I added the defineCustomElements(window); bit to main.ts.

Still no go. :confused:

What am I doing wrong?

Thanks much!

2

If defineCustomElements doesn’t work you could try copying the js files to the bundle by configuring that as an assets copy like as an example described in one of my components https://github.com/fluster/web-social-share#installation-in-a-ionic-v4-project

3

@applesquash, where you able to get this working?
I’m having also trouble adding my custom web components to an Ionic app (Ionic 4).

The solution mentioned by @Reedrichards is neither working for me.

I still get the error ‘is not a known element’

4

I’ve found a solution. I added CUSTOM_ELEMENTS_SCHEMA to a shared module which I was importing in all my modules. When I added CUSTOM_ELEMENTS_SCHEMA to the module from the component where I wanted to use the Web Component as well, it started the work.

I’m not sure why it doesn’t work when only adding CUSTOM_ELEMENTS_SCHEMA to the SharedModule.

1 Like
5

Sadly, no.
It wasn’t critical to anything I was working on at the time, so I back-burnered it.

6

thanks , it works with ionic 4