bug: Angular can't handle event types in HTML-Templates after issue #4908 is released for Stencil 4.6.0

[FabioGimmillaro]

Unfortunately the provided solution for issue https://github.com/ionic-team/stencil/issues/4908 in Stencil 4.6.0 didn't work for me.

I'm getting following error in my Angular-Project (Version 16.2.0): Event valueChange is not emitted by any applicable directives nor by dx-text-input element. The compilation still works fine but I cannot get any autocompetion for my event.

I'm using following dependencies:

• @stencil/angular-output-target: 0.8.2
• @stencil/core: 4.6.0

The event map within my dist/types is generated properly:

interface HTMLDxTextInputElementEventMap {
        "valueChange": string;
        "valueComplete": string;
        "autocomplete": TextInputAutocompleteController;
        "selectAutocomplete": any;
        "enterPress": void;
    }
    /**
     * Form element for capturing text input.
     * @path /Form/Inputs
     * @name Text Input
     * @shortname Text
     * @icon font
     * @stable 
     * @slot-example info
     */
    interface HTMLDxTextInputElement extends Components.DxTextInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLDxTextInputElementEventMap>(type: K, listener: (this: HTMLDxTextInputElement, ev: DxTextInputCustomEvent<HTMLDxTextInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLDxTextInputElementEventMap>(type: K, listener: (this: HTMLDxTextInputElement, ev: DxTextInputCustomEvent<HTMLDxTextInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLDxTextInputElement: {
        prototype: HTMLDxTextInputElement;
        new (): HTMLDxTextInputElement;
    };

Angular HTML-file

  <dx-text-input (valueChange)="onTextInputValueChanged($event.detail)"></dx-text-input>

Angular Typescript-file

  onTextInputValueChanged(detail: string) {
    console.log(detail);
  }

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[anton-white]

Same here and it's been happening with angular output components in v3 too.

The IDE doesn't see the component's outputs:

The outputs aren't listed in the generated component:

After adding outputs: ['ready'] the IDE becomes satisfied.

[FabioGimmillaro]

Hey guys,

I added a repository which reproduces the described issue: https://github.com/FabioGimmillaro/stencil-test-angular-events

I followed this guide: https://stenciljs.com/docs/angular#angular-integration

[tanner-reits]

Hey @FabioGimmillaro

I'm gonna move this issue over to our Framework wrappers repository as this appears to be specific to the Angular wrappers. We'll take a look and post any updates over there!

[timges]

Any updates on this, yet?

[jtmmsg]

We have this same issue here using GroupUI having this as a dependency. Please get into this soon.

[jtmmsg]

Any updates here? This really prevents Autocompletion in IntelliJ and shows some ugly errors and prevents type safety in the events... And there are other projects like GroupUI 9.0.0 relying on your code which I have to use at work...

[adarean5]

Any updates on this issue? I'm experiencing the same problem. This makes it difficult to work with the generated components right out of the box, as it breaks type safety between my Stencil component library and the Angular application.

[rwaskiewicz]

Hey folks 👋

I don't have an update for this issue at this time. We have the repo's current maintenance status posted on the README, which for posterity, is:

This project is currently maintained for the purposes of supporting the Ionic Framework. At this time, only new issues & pull requests that support the Ionic Framework will be prioritized.

At this time, I don't believe this issue has been prioritized.

[romainfrezier]

Hi there,

It would not be enough to simply add the outputs tag here?

@Component({
  selector: '${tagName}',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
  inputs: [${formattedInputs}],${standaloneOption}
})

To make it look something like this:

@Component({
  selector: '${tagName}',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
  inputs: [${formattedInputs}],outputs: [${formattedOutputs}],${standaloneOption}
})

formattedOutputs is already calculated