Error: src/app/app.component.html:1:74 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'CustomEvent<NameClickedEvent>'.
  Type 'Event' is missing the following properties from type 'CustomEvent<NameClickedEvent>': detail, initCustomEvent
1 <my-component first="Stencil" last="Compiler" (nameClicked)="nameClicked($event)"></my-component>
We pushed a minimal repository to reproduce the error :
clone the repo https://github.com/viico/angular-output-target-custom-event
npm install and npm run build in stencil-library folder
npm install and npm run build in angular-workspace folder
npm install and ng serve in my-app folder => errors occurs during ng serve
It works if we set strictTemplates at false or if we use any or Event type but these solutions are not feasible.
//nameClicked($event: any) { // works
nameClicked($event: CustomEvent<NameClickedEvent>) { // fails
  console.log($event);
After a 2 day search we don't see what we did wrong, could you help us to find the problem ?
Thanks
          
I forgot an information.
When I manually update the auto-generated angular directive proxies file to add the outputs key in the Component decorator, it fixes the error, but the event is trigger twice (relative to this PR #202).
@Component({
  selector: 'my-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  inputs: ['first', 'last', 'middle'],
  outputs: ['nameClicked'] // fix the error, but event is trigger twice
          
A workaround to this issue that I've used is to define a HTMLElementTagNameMap where I define event listeners for each Event:
/** src/my-types.d.ts */
declare global {
  type EventName = "my-event";
  interface HTMLMyComponentElement {
      addEventListener<EventName>(type: EventName, listener: (this: HTMLMyComponentElement, ev: MyComponentCustomEvent<boolean>) => any, options?: boolean | AddEventListenerOptions): void;
      addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
      removeEventListener<EventName>(type: EventName, listener: (this: HTMLMyComponentElement, ev: MyComponentCustomEvent<boolean>) => any, options?: boolean | EventListenerOptions): void;
      removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
  interface HTMLElementTagNameMap {
      "my-component": HTMLMyComponentElement;
I've created a PR to make this part of Stencil's compiler: ionic-team/stencil#4909

And you can use this output target to generate these event listener types for your project: https://github.com/m-thompson-code/event-listener-types-output-target#event-listener-types-output-target