Stencil: Stencil component consumed in Angular fails building.

[dkundel]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

I build a very basic component using Stencil and published it afterwards to npm and tried to consume it in an out of the box Angular application. I followed the steps described in the documentation.

It failed building due to HTMLAttributes not being defined in the components.d.ts file.

The fix was to ad /// <reference types="@stencil/core" /> to the top of the components.d.ts file.

Expected behavior:

It builds without manually editing the compiled output.

Steps to reproduce:

1. Clone dkundel/webcomponents-by-example
2. cd angular-demo
3. npm install
4. npm start

This will fail building. Afterwards open angular-demo/node_modules/@dkundel/stencil-demo-components/dist/types/components.d.ts and add to the top /// <reference types="@stencil/core" />, save the file and try npm start again. The project builds successfully.

Related code:
All related code is in dkundel/webcomponents-by-example.

The code for the component is in the stencil-demo-components folder, the example project is in angular-demo.

Other information:

[danbucholtz]

I have validated this is still an issue, even when building with the latest version of Stencil and linking.

This is a duplicate of a closed issue: https://github.com/ionic-team/stencil/issues/338

Thanks,
Dan

[jgw96]

cc @jthoms1 any ideas here? Looks like a typings thing

[dkundel]

The solution is already in the issue :) You are using global types that have to be referenced in the generated type files:

/// <reference types="@stencil/core" />

[jgw96]

@dkundel yep that's a good workaround, although you actually should not need to do that if we had the correct behavior here.

[Aaron-Sterling]

I would love a fix here. I've published updates to npm twice now, and then had to re-publish immediately, because I forgot to add the line in after performing the build. It's easy to slip -- at least easy for me -- with multiple public-facing web components.

[jgw96]

@Aaron-Sterling sorry about that, that does sound frustrating. We have this issue scheduled for our next milestone, so we will be getting to it very soon. In the meantime as a workaround, maybe you could write a little node script to include this snippet for you when you deploy?

[Aaron-Sterling]

...and then lose my ability to complain on the internet about this????

Thanks for the idea, I'll probably do that.

[jgw96]

😆

[adamdbradley]

This should be fixed in the latest releases of stencil and ionic/core. Thanks!

[trazek]

I am on @stencil/core": "^0.6.1", and needed to use the proposed work around to get rid of the error.

[trazek]

This seems fixed. I am using "dependencies": { "@stencil/core": "^0.6.18" }, and have no more issues.

[jarrettj]

Hi,

Good day.

I'm getting this error in my angular app. And googling led me here. Excuse me if it is the wrong repo.

Would any of you know where I would add in my angular app?

Regards.
JJ