StencilJS unable to get Angular Standalone library to build

I'm working on projects relying on Angular16+ with only standalone components.
So I expect to build angular standalone components library out of my Web Components library, to be used in my projects.

When I do a StencilJS build, it does export components in my angular library as standalone components, as expected.
But it produces a typescript error at components.ts on component import.
TS2307: Cannot find module stencil-library/components or its corresponding type declarations.

It doesn't build:

Building entry point 'component-library'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/component-library/src/lib/stencil-generated/components.ts:7:33 - error TS2307: Cannot find module 'stencil-library/components' or its corresponding type declarations.

7 import type { Components } from 'stencil-library/components';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
projects/component-library/src/lib/stencil-generated/components.ts:9:58 - error TS2307: Cannot find module 'stencil-library/components/my-component.js' or its corresponding type declarations.

9 import { defineCustomElement as defineMyComponent } from 'stencil-library/components/my-component.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

npm ERR! Lifecycle script `build` failed with error:
npm ERR! Error: command failed


I'm using StencilJS 4.18

"@stencil/angular-output-target": "^0.8.4",
"@stencil/core": "^4.7.0",
"@types/jest": "^29.5.6",
"@types/node": "^16.18.11",


I followed the https://stenciljs.com/docs/angular walk through.
I only replaced outputType to 'standalone' and the outputTargets to 'dist-custom-elements'.

here is my stencil.config.ts :

import { Config } from '@stencil/core';
import { angularOutputTarget } from '@stencil/angular-output-target';

export const config: Config = {
namespace: 'stencil-library',
outputTargets: [
{
type: 'dist-custom-elements',
customElementsExportBehavior: 'single-export-module',
},
angularOutputTarget({
componentCorePackage: 'stencil-library',
outputType: 'standalone',
directivesProxyFile: '../angular-workspace/projects/component-library/src/lib/stencil-generated/components.ts',
directivesArrayFile: '../angular-workspace/projects/component-library/src/lib/stencil-generated/index.ts',
}),
],
};



My angular library is based on Angular18, but same issue with Angular16.

packages/angular-workspace/projects/component-library/src/lib/stencil-generated/components.ts

/* tslint:disable */
/* auto-generated angular directive proxies */
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';

import { ProxyCmp } from './angular-component-lib/utils';

import type { Components } from 'stencil-library/components';

import { defineCustomElement as defineMyComponent } from 'stencil-library/components/my-component.js';
@ProxyCmp({
defineCustomElementFn: defineMyComponent,
inputs: ['first', 'last', 'middle']
})
@Component({
selector: 'my-component',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['first', 'last', 'middle'],
standalone: true
})
export class MyComponent {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
}
}


export declare interface MyComponent extends Components.MyComponent {}


Here is my file structure: File structure screenshot

Continue reading...