Stencil v1.8.0 is incompatible with Angular 8

[robinsummerhill]

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://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Stencil v1.8.0 migrated to using Typescript 3.7.2. This minor release of TypeScript has a breaking change that causes component libraries built with Stencil v.1.8.0+ to be incompatible with Angular 8. (See microsoft/TypeScript#33939). The change means that d.ts declaration files generated by Typescript 3.7.0+ are not backward compatible and cannot be consumed by projects built with earlier versions of Typescript.

According to the Typescript team this is 'working as expected' and there are no plans to fix. Also, Angular will not upgrade to using TS 3.7.2 until mid version 9. So, effectively, the last version of Stencil that is compatible with Angular is 1.7.5.

Expected behavior:
The latest version of Stencil should be compatible with Angular v8 and therefore should revert to TS3.6 until the issue linked above is resolved.

Steps to reproduce:
Any public getter on an exported class will trigger the issue. e.g.:

export class Foo {
    get bar(): boolean { return true; }
}

TS3.6 .d.ts output:

export declare class Foo {
    readonly bar: boolean;
}

TS3.7 .d.ts output:

export declare class Foo {
    get bar(): boolean;
}

Using the TS3.7 generated d.ts files in a project compiled with TS<=3.6 will give the following TS error:
error TS1086: An accessor cannot be declared in an ambient context.

[novitskiy-aleksei]

Error also reproduces in version 1.8.1

[mboudreau]

I'm currently using Stencil 1.8.1 with a get function in angular 8.1 without any issue. I tried to reproduce it, but I can't seem to do it.

Could you maybe try to create an example code snippet or project to try out?

[novitskiy-aleksei]

@mboudreau thank you for response. Here I've created repo which contains ionic+angular project with usage of stencil-built component. Let me know if any additional help needed

[mboudreau]

Ah right, I see the difference now. You're defining it inline with your project while I'm actually adding script tags to my angular app to the component library as mentioned here. This way I have control to update my library without having to update the app, which gives me more flexibility. I still use npm to get the definitions for the elements though to make it easier to develop with.

[robinsummerhill]

Ah right, I see the difference now. You're defining it inline with your project while I'm actually adding script tags to my angular app to the component library as mentioned here. This way I have control to update my library without having to update the app, which gives me more flexibility. I still use npm to get the definitions for the elements though to make it easier to develop with.

Irrespective of how you are consuming the library, if you are using the d.ts files generated during the Stencil build within your Angular project then you will hit this problem.

[RudyBricks]

Error also reproduces in version 1.8.5. We at Basler Insurance are a big fan of Stencil and plan to utilize it in our web applications.

However, upgrading from Angular 8 to Angular 9 or avoiding the *.d.ts files is not an option for us at the moment.

Can we somehow help to solve this issue?
See baloise/design-system#58

[rwaskiewicz]

Hey all,

I apologize that it took so long for someone on the Stencil team to respond to this issue. Unfortunately, this issue predates the current Stencil team, and the versions of Stencil/Angular that we currently support. I apologize that this issue won't be closed with a satisfactory outcome, and again for the lack of response from the team.