bug: Angular Value Accessor is created without selector specified for older versions

[A143447]

Versions:

• @stencil/core 2.6.0
• @stencil/angular-output-target 0.0.7
• tslib 2.0.0
• typescript 4.3.5

In the stencil.config.ts I specify the following for the valueAccessorConfigs:

const angularValueAccessorBindings: ValueAccessorConfig[] = [
  {
    elementSelectors: ['dls-radio-button-group'],
    event: 'selectedValueChanged',
    targetAttr: 'selectedValue',
    type: 'radio'
  },
  {
    elementSelectors: ['dls-text-input'],
    event: 'valueChange',
    targetAttr: 'value',
    type: 'text'
  }
];

When I execute the build process the generated value-accessor.ts file has the following as the first 9 lines:

import { Directive, ElementRef, HostListener } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';

@Directive({ selector: 'dls-value-accessor' })
export class ValueAccessor implements ControlValueAccessor {
  private onChange: (value: any) => void = () => {
    /**/
  };
  private onTouched: () => void = () => {

I need to manually enter the Directive line to be
@Directive({ selector: 'dls-value-accessor' })
for Angular to be able to consume the web components.

[poulpe38000]

Are you using Angular 8 or less ? if so, the support for Empty Decorators has been made mandatory for angular 9 and higher.

I proposed a PR that is supposed to fix this: #175

[A143447]

Hi @poulpe38000, thanks so much for your response. I am using Angular 11. When I don't include the selector this is the error I receive when running ng serve:

Error: node_modules/@aglenergy/design-system-components/dist/angular/directives/value-accessor.ts:4:1 - error NG2004: Directive ValueAccessor has no selector, please add it!

  4 @Directive({})
    ~~~~~~~~~~~~~~
  5 export class ValueAccessor implements ControlValueAccessor {
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 38   }
    ~~~
 39 }
    ~

[zh3ngyuan]

Hi @poulpe38000 I saw the PR is still pending for merge, is there any walkaround for now? the automatic building in our project is currently blocked by this

[sean-perkins]

Thanks for this issue. I think the best course of action here, instead of the PR to introduce a legacy flag, is to just assign a selector for value accessor to satisfy older versions of Angular as well as their updated API.

Having a directive with a selector of:

@Directive({
  selector: 'stencil-ds-output-target-value-accessor'
})
export class ValueAccessor implements ControlValueAccessor { }

or similar, is extremely unlikely to conflict with any selectors in your applications and we can drop it when we stop supporting the last version of Angular with that constraint.