bug: 'Namespace components.Components' has no exported member 'IonAccordion'

[miqmago]

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

3.4.2 and 4.2.0

Stencil Framework Output Target

Angular

Stencil Framework Output Target Version

0.8.1

Current Behavior

• @stencil/core 3.4.2 and 4.2.0
• @stencil/angular-output-target: ^0.8.1

Building a custom-component which uses @ionic/core to render some components:

1. In stencil.config.ts I've defined namespace: 'CustomComonentNs' but anyway the components.d.ts generates:

export namespace Components {
[...]
}

If this is fixed, @stencil/angular-output-target should also import and generate components.ts from corrected namespace.

2. The generated component.ts includes all components from @ionic/core, it does not filter the components really used. In example, the stencil-library only uses ion-content in my-component (see https://github.com/miqmago/custom-library-ng-bug/blob/master/stencil-library/src/components/my-component/my-component.tsx#L30) but the generated angular-workspace/projects/component-library/src/lib/stencil-generated/component.ts contains:

import { Components } from 'custom-component';

[...]

@ProxyCmp({
  inputs: ['disabled', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value']
})
@Component({
  selector: 'ion-accordion',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
  inputs: ['disabled', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'],
})
export class IonAccordion {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
}

export declare interface IonAccordion extends Components.IonAccordion {}

[...]

3. It also imports Components from components.d.ts, but as stated in Angular lib doesn't compile when ionicons dependency is added to Stencil lib #232, we should declare all the components in interface.d.ts. This is quite difficult considering that components.ts includes all the components from @ionic/core, so it makes really difficult to maintain. Would be easier if output-target generator would exclude unused components. Anyway I imagine that the problem is with any external library or web component that would define it's custom-elements, they should be re-exported as described by @sean-perkins in mentioned issue.

If the step 3 is not done, angular library will not compile, complaining about:

projects/component-library/src/lib/stencil-generated/components.ts:278:58 - error TS2694: Namespace '"/Volumes/projects/stencil-library/dist/types/components".Components' has no exported member 'IonAccordion'.

278 export declare interface IonAccordion extends Components.IonAccordion {}

Expected Behavior

1. namespace correctly named as CustomComonentNs
2. only the components from any external library used by stencil-library should be exported
3. provide a way to automatically re-export definitions from external libraries (@ionic/core, ionicons, ...) without having to manually import and re-export them.

Right now the solution I've found is to manually rename the namespace, import { Components as IonComponents } from '@ionic/core'; and replace Components by CustomComponentsNs and IonComponents, but this is done manually and it's very error prone.

Steps to Reproduce

Follow all the steps in https://stenciljs.com/docs/angular

In custom-component install @ionic/core and use it in some component.

Compile the custom-component to angular target.

Code Reproduction URL

https://github.com/miqmago/custom-library-ng-bug

Additional Information

No response

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
Thank you!