bug: angular components do not include outputs

[davidmccoy-8451]

Prerequisites

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

Stencil Version

N/A

Stencil Framework Output Target

Angular

Stencil Framework Output Target Version

0.9.0

Current Behavior

This PR introduced a fix for angular component outputs to be processed correctly by the Angular Language Service that IDEs use:
#55

However, in the updated implementation, there is no outputs array provided to the component metadata:
https://github.com/stenciljs/output-targets/blob/main/packages/angular/src/generate-angular-component.ts#L108-L114

This should be re-included so that errors in IDEs like the following do not occur:

Expected Behavior

The outputs are included so that outputs are recognized in templates by IDEs.

Steps to Reproduce

N/A

Code Reproduction URL

N/A

Additional Information

No response

[christian-bromann]

@davidmccoy-8451 makes sense to me and thanks for raising the issue. Mind opening a PR for this? Happy to merge and publish it.

[davidmccoy-8451]

Looking into it further, I don't know if there's a solve here.

The goal is to have outputs that are recognized in the Angular template.

But that requires registering the output with Angular through some mechanism (outputs array, @Ouput decorator, factories output and outputFromObservable).

And registered Angular outputs respond independently to events of the same name. That means you will get duplicate output events in the proxy components.

As a terse example, this shows an angular component that is intended to never output, yet will output every 1 second because there is a custom event dispatched internally:

@Component({
  standalone: true,
  selector: 'should-never-output',
  template: '',
  outputs: ['test'],
})
class ShouldNeverOutputComponent {
  element = inject(ElementRef).nativeElement;
  test = of(); // purposefully empty so that there should be no output

  constructor() {
    interval(1000).subscribe(() => {
      this.element.dispatchEvent(new CustomEvent('test', { detail: 'something' })); // dispatching a custom event, like proxied components do
    });
  }
}

@Component({
  standalone: true,
  template: `<should-never-output (test)="logOutput($event)"></should-never-output>`,
  imports: [TestComponent],
})
class ShouldNeverOutputComponent {
  logOutput(theOutput: unknown): void {
    console.log('output', theOutput); // this logs every second even though `test` is intended to never output
  }
}

[davidmccoy-8451]

related #202

[davidmccoy-8451]

#308 attempted to fix but was closed

[davidmccoy-8451]

Personally, I'm adopting the fix from #308 for now in my enterprise app, because the only resolution paths I see are:

• suppress angular's output behavior to react to events of the same name
• use different/prefixed stencil event names internally for proxied component

[gratzl-dev]

I think I found a solution.
Will create a PR once the Angular upgrade PR is through

[christian-bromann]

Thanks for tackling this. This has been published as @stencil/angular-output-target@v1.0.0.

[gratzl-dev]

This has not been fixed yet @christian-bromann
The last PR I did submitted fixed #648

[gratzl-dev]

I will tackle this issue next week when I'm back in office :)

[christian-bromann]

Oh, thanks for letting me know. I will re-open this then.