StencilJS unable to get Angular Standalone library to build

Question

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

Answer 1

TL;DR: Modify the contents of the exports key in stencil-library/package.json as shown below.

---

I believe the root of the problem is the set of exports that StencilJS adds to the package.json file in the stencil-library directory created in the tutorial steps. The exports key still references build products generated by the "dist" output target in the stencil.config.ts file. The "dist-custom-elements" target with the customElementsExportBehavior set to single-export-module (as recommended by the outputType argument documentation) only generates two (2) directories under the dist folder: components and types. The directivesProxyFile generated by angularOutputTarget() makes reference to the stencil-library/components and stencil-library/components/my-component.js modules. So, I edited the contents of the exports key in the stencil-library/package.json to read as follows so that the directivesProxyFile could find the StencilJS-compiled modules:

"exports": {
    "./components": {
      "import": "./dist/components/index.js",
      "types": "./dist/components/index.d.ts"
    },
    "./components/my-component.js": {
      "import": "./dist/components/my-component.js",
      "types": "./dist/components/my-component.d.ts"
    }
  },

After doing that, the ng build of the component-library Angular directory, as well as the build of the my-app Angular app directory, worked as expected.