Help with angular-output-target

Stencil
1

Hey there! Im new to the forum and to Stencil.js. Im writing a toggle switch component in which i need to compile it for angular and React. I’ve installed the angular-output-target. The component builds and the the files are generated in the angular folder of the component. I added the component to a test angular app but im getting errors.

I originally followed this doc Angular Integration with Stencil | Stencil

The issue, is, ngModel doesn’t work out of the box. I read the doc located here Angular Integration with Stencil | Stencil

But the example did not work for me. Or im just not understanding it.

This image shows my project structure. My design system will treat each component separately so developers can select what components they want to install.

After following the doc and running the build, i get the “angular” folder structure in the image.

image
image345×627 28.5 KB

Here is my stencil.config.ts file

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { reactOutputTarget } from '@stencil/react-output-target';
import { angularOutputTarget, ValueAccessorConfig } from '@stencil/angular-output-target';

const angularValueAccessorBindings: ValueAccessorConfig[] = [
  {
    elementSelectors: ['atria-toggle-switch'],
    event: 'valueChange',
    targetAttr: 'checked',
    type: 'boolean'
  }
];

export const config: Config = {
  namespace: 'toggle-switch',
  plugins: [
    sass() 
  ],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'dist-custom-elements',
      externalRuntime: false
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      serviceWorker: null
    },
    reactOutputTarget({
      outDir: 'react/',
      esModules: true,
    }),
    angularOutputTarget({
      componentCorePackage: '@banneratria/toggle-switch',
      directivesProxyFile: 'angular/toggle-switch-proxies.ts',
      directivesArrayFile: 'angular/index.ts',
      valueAccessorConfigs: angularValueAccessorBindings,
      outputType: 'standalone'
    })
  ]
};

and here is my package.json file

{
  "name": "@banneratria/toggle-switch",
  "version": "0.0.2",
  "main": "dist/index.cjs.js",                    
  "module": "dist/index.mjs",                       
  "collection": "dist/collection/collection-manifest.json",
  "customElements": "dist/custom-elements/index.js",
  "files": [
    "dist/",
    "loader/",
    "angular/",
    "index.d.ts"
  ],
  "types": "dist/types/dist/index.d.js",
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch"
  },
  "dependencies": {},
  "devDependencies": {
    "@stencil/core": "^4.0.0",
    "@stencil/sass": "^1.5.2",
    "@stencil/react-output-target": "^0.8.2",
    "@stencil/angular-output-target": "^0.10.2",
    "sass": "^1.66.1"
  }
}

this is what was generated in the index.ts file

import * as d from './toggle-switch-proxies';

export const DIRECTIVES = [
  d.AtriaToggleSwitch
];

When i go to consume this package in angular 19. Im importing it like this in the component file that will be using my toggle switch component

import { DIRECTIVES  } from '@banneratria/toggle-switch/angular';

@Component({
  standalone: true,
  selector: 'bh-button',
  templateUrl: './button.component.html',
  styleUrl: './button.component.scss',
  imports: [CanvasComponent, CommonModule, DIRECTIVES],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Im getting the following error

Unable to import component AtriaToggleSwitch.
  The symbol is not exported from /Users/venVBennen/Documents/Projects/Atria Design System/Atria-playground/atria-playground/node_modules/@banneratria/toggle-switch/angular/index.ts (module '@banneratria/toggle-switch/angular').(-993004)
toggle-switch-proxies.ts(8, 20): The component is declared here.
class AtriaButtonComponent

this is how im hoping to use. the toggle switch

<atria-toggle-switch 
    label="Loading state" 
    [(ngModel)]="buttonLoading" 
    (value)="updateComponentProperties($event)">
</atria-toggle-switch>

Can anyone shed some light on what im doing wrong? Does anyone have experience adding ngModel to a stencil component. I have created two other components (button and tabs) in stencil and used them successfully in angular however neither used ngModel for two way binding.

2

Anyone know about this?