bug: Event sncStateChange is not emitted by any applicable directives nor by snc-navigation-sidebar element

[ofirrifo]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

"@stencil/core": "2.17.1",

Stencil Framework Output Target

Angular

Stencil Framework Output Target Version

"@stencil/angular-output-target": "^0.4.0",

Current Behavior

First I want to mention I read this Which is the same issue as I have but despite I'm using the latest version I still have the issue.

When I'm using the components in Angular it show me this error. Event sncSave is not emitted by any applicable directives nor by snc-my-component element

For this code

  <snc-my-component
    (sncSave)="save($event)">
  </snc-my-component>

And I found that the outputs from the angular proxies is not exist as part of the @Component decorator.

@ProxyCmp({
  defineCustomElementFn: undefined,
  inputs: []
})
@Component({
  selector: 'snc-my-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  inputs: [],
})
export class SncMyComponent {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['sncSave']);
  }
}

Expected Behavior

To have the outputs: ["sncSave"] as part of the @Component

Steps to Reproduce

• create an stenciljs component with event
• create angular component from stenciljs project
• create a new angular project and try to use the angular component output

Code Reproduction URL

https://github.com/ionic-team/stencil-ds-output-targets/issues/new?assignees=&labels=&template=bug_report.yml&title=bug%3A+

Additional Information

No response

[sean-perkins]

This issue should be resolved once: https://github.com/ionic-team/stencil-ds-output-targets/pull/266 is rebased and merged.

You can temporarily test with the dev-build to help validate behavior:

0.6.1-dev.11655499531.137e1d26

Unfortunately adding values to the outputs array results in duplicate event emissions. The actual fix is a combination of stripping the metadata that Angular uses for handling the event emissions internally and using the new event detail interfaces generated by Stencil on the component interfaces.

[ofirrifo]

@sean-perkins I checked it and it work as should. Any assumption when it will pushed to master branch so I can use it ?

[FabioGimmillaro]

I have the same error with 0.6.0

When looking into the proxies.d.ts the corresponding event is not within the declared class but the interface:

export declare class MyComponent {
    protected z: NgZone;
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent , never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent , "my-component", never, { "prop": "prop" }, {}, never, ["*"], false, never>;
}
export declare interface MyComponent extends Components.MyComponent {
    evt: EventEmitter<CustomEvent<boolean>>; // <== here
}

before 0.6.0 we used 0.1.0 which generated the following:

export declare class MyComponent {
    protected z: NgZone;
    protected el: HTMLElement;
    evt: EventEmitter<CustomEvent<boolean>>; // <== here
    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent , never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent , "my-component", never, { "prop": "prop" }, { "evt": "evt" }, never, ["*"], false, never>; // <== here 
}
export declare interface MyComponent extends Components.MyComponent {}

In my case the code still compiles (the linter seems to generate the error) but in other projects using our components it leads to a compile error. Maybe they have a stricter tsconfig but they shouldn't be forced to adjust it depending on the project needs.