bug: angular-output-target emitting invalid syntax 1/2

[Hugh-Ryan]

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

"@stencil/angular-output-target": "~0.10.2", "@stencil/core": "4.23.0",

Current Behavior

The generated components.ts has the following invalid syntax:

import type { IAceDate as IAceDatePickerIAceDate } from '@ace/components';

export declare interface AceDatePicker extends Components.AceDatePicker {
  /**
   * Event will be raised when the value of the formControl has changed
   */
  valueChange: EventEmitter<CustomEvent<IAceDatePickerIAceDate.>>;
  /**
   * Event will be raised when dropdown opens or closes
   */
  openChange: EventEmitter<CustomEvent<boolean>>;
  /**
   * Event will be raised when input is focused
   */
  controlFocus: EventEmitter<CustomEvent<IAceDatePickerIAceDate.>>;
  /**
   * Event will be raised when input loses focus
   */
  controlBlur: EventEmitter<CustomEvent<IAceDatePickerIAceDate.>>;
  /**
   * Event will be raised when a validation error occurs
   */
  controlError: EventEmitter<CustomEvent<Record<string, string>>>;

...
}

Notice each EventEmitter has the following invalid syntax:

valueChange: EventEmitter<CustomEvent<IAceDatePickerIAceDate.>>;

Notice at the end of the line the following invalid syntax:

<CustomEvent<IAceDatePickerIAceDate.>>

Notice the extraneous "dot" at the end .>>

If I manually go in and delete the trailing dot, it works as expected.

Here is my stencil.config:

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

export const config: Config = {
    namespace: 'ace',
    plugins: [
        sass({
            injectGlobalPaths: ['src/include/css/variables/_index'],
            includePaths: ['../../node_modules/bootstrap', '../../node_modules/gridstack/dist']
        })
    ],
    outputTargets: [
        {
            type: 'dist-custom-elements',
            copy: [{ src: '../../../node_modules/pdfjs-dist/web/pdf_viewer.js.map', dest: 'dist/components/pdf_viewer.js.map' }],
            externalRuntime: false
        },
        {
            type: 'dist'
        },
        {
            type: 'docs-readme'
        },
        {
            type: 'docs-json', // used by storybook-addon-docs-stencil
            file: 'dist/metadata.json'
        },
        {
            type: 'www',
            serviceWorker: null, // disable service workers
            copy: [
                { src: 'pages', dest: 'pages' },
                { src: '../assets', dest: 'assets' },
                { src: '../../../node_modules/pdfjs-dist/build/pdf.worker.min.js', dest: 'assets/pdf/pdf.worker.min.js' }
            ]
        },
        angularOutputTarget({
            componentCorePackage: '@ace/components',
            outputType: 'component',
            directivesProxyFile: '../ace-components-angular/src/lib/stencil-generated/components.ts',
            directivesArrayFile: '../ace-components-angular/src/lib/stencil-generated/index.ts',
            customElementsDir: 'dist'
        }),
        reactOutputTarget({
            // Relative path to where the React components will be generated
            outDir: '../ace-components-react/src/components/stencil-generated/'
        })
    ],
    nodeResolve: {
        preferBuiltins: true,
        browser: true
    },
    testing: {
        transform: {
            '^.+\\.jsx?$': 'babel-jest'
        },
        browserExecutablePath: '/Applications/Chromium.app/Contents/MacOS/Chromium',
        testPathIgnorePatterns: ['ace-pdf-viewer', 'ace-tooltip', 'dist'], // components that load deps' tests are disabled for now
        moduleFileExtensions: ['ts', 'tsx', 'js', 'mjs', 'jsx', 'json', 'd.ts']
    },
    sourceMap: true
};

Expected Behavior

Expect the generated typescript to be valid and able to be built without hand modifying.

System Info

System: node 22.18.0
    Platform: windows (10.0.22631)
   CPU Model: Intel(R) Core(TM) Ultra 9 185H (22 cpus)
    Compiler: C:\Users\rc08281\dev\ACE-develop\node_modules\@stencil\core\compiler\stencil.js
       Build: 1733951986
     Stencil: 4.23.0
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Follow the instructions found here:
https://stenciljs.com/docs/angular

Build the Component Library
Attempt to build the Angular Wrapper Component Library
Notice the syntax error in the generated components.ts file

Code Reproduction URL

n/a

Additional Information

The reactOutputTarget is working perfectly. See the included stencil.config

[github-actions]

We need a minimal reproduction to be able to triage this issue.

Why do we need a minimal reproduction?

Reproductions allow the team to triage and fix issues quickly with a relatively small team. They help us identify the source of the problem and verify that the issue is not caused by something specific to your project.

How can I create a reproduction?

Please use one of the following starter templates to create a minimal reproduction:

Framework	CodeSandbox Template
Angular	stencil-angular-starter
NextJs	stencil-starter-next
React	stencil-starter-react
Vue	stencil-starter-vue

A reproduction should be as minimal as possible. This means removing any code that is not directly related to the issue. The less code there is, the easier it is to identify the problem.

You can also provide a link to a public GitHub repository that demonstrates the issue.

What happens next?

• If you provide a valid reproduction link, this issue will be triaged and addressed based on priority.
• If no reproduction is provided within 7 days, this issue may be automatically closed.
• You can always reopen the issue by providing a reproduction link.

---

Resources:

• How to create a Minimal, Reproducible Example
• The Importance of Reproductions