TS2693 'string' only refers to a type, but is being used as a value here

Question

I have the following child component

@EntryComponent({
  type: PhoneNumberComponent,
  name: 'PhoneNumberComponent'
})
@Component({
  moduleId: module.id,
  providers: [],
  selector: '[phone-number-cmp]',
  templateUrl: '../views/phone-number.html'
})
export class PhoneNumberComponent {
  @Input() parentForm: FormGroup;
  @Input() control: AbstractControl;
  @Input() label: string;
  @Input() className: string;
  @Input() errorMessageRequired: string;
  @Input() errorMessagePattern: string;
}

somewhere in there is throwing the TSlint error TS2693 'string' only refers to a type, but is being used as a value here

I have tried to re assign the @Input variable/values to a local variable, without any success to get rid of that error.

  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="officePhoneNumber"
       [label]="'Office Phone Number'"
       [className]="'officePhoneNumber'"
       [errorMessageRequired]="'Office phone number is required.'"
       [errorMessagePattern]="'Office phone number must contain 10 numbers. (e.g. XXX XXX XXXX)'"
  ></div>
  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="faxPhoneNumber"
       [label]="'Fax Phone Number'"
       [className]="'faxPhoneNumber'"
       [errorMessageRequired]="'Fax phone number is required.'"
       [errorMessagePattern]="'Fax phone number must contain 10 numbers. (e.g. XXX XXX XXXX)'"
  ></div>

I'm passing the string values like the above.

Does anyone know how to get rid of that message?

The TS error usually gives a line number as well. You should probably look there — Poul Kruijt, Feb 26 '20 at 20:17
I have a few questions. Module.id why do you use that? I saw that in earlier versions of NGX but not later versions. Also @EntryComponent decorator, why is that used here? Is this a dynamically created component? If so, why not put this into the entrycomponents of the module and use a decorator? (I am asking because I have not seen this done before so, I am genuinly interested in knowing why and what the advantage might be versus putting it into a module) — Inge Olaisen, Feb 26 '20 at 20:47
@PierreDuc, it gives me now line number, that would have been my first place to look also. — Diego, Feb 26 '20 at 21:16
@IngeOlaisen please look at https://stackoverflow.com/questions/37178192/angular-what-is-the-meanings-of-module-id-in-component, in general it helps with the relative paths. — Diego, Feb 26 '20 at 21:16
@AdamDunkerley the reason i have my components set in `[]` is so i can then use them in html tags like so `
` without that i can just call it the traditional component way `` makes sense? — Diego, Feb 26 '20 at 21:19
@Diego ah right, thanks, it's been a while, there's no mention of that anylonger. Probably because it's the default behavior these days. Paths in the templateUrl and styleUrls are relative to the component. Anyway what about the entrycomponents decorator? It isn't mentioned in the documentation for Angular. Normal convention is like I mention to put that into the module in which it is declared. — Inge Olaisen, Feb 26 '20 at 21:27
Dont use bindings with static strings: `[label]="'Office Phone Number'"` should be `label="Office Phone Number"` and so on ... — Andre Elrico, Feb 27 '20 at 07:29
@AndreElrico the `[label]`, `[className]` and so forth are meant to be "dynamic". Being that I'm trying to make this component as flexible as "possible", hence the binding of these attributes — Diego, Feb 27 '20 at 15:17

score 0 · Answer 1 · answered Feb 27 '20 at 15:33

My solution was to pass in the values from the parent

.html
  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="officePhoneNumber"
       [label]="officePhoneNumberLabel"
       [className]="officePhoneNumberClassName"
       [errorMessageRequired]="OfficePhoneNumberRequired."
       [errorMessagePattern]="OfficePhoneNumberPattern"
  ></div>

.ts
@EntryComponent({
  type: ContactInfoComponent,
  name: 'ContactInfoComponent'
})
@Component({
  moduleId: module.id,
  providers: [],
  selector: '[contact-info-cmp]',
  templateUrl: '../views/contact-info.html'
})
export class ContactInfoComponent {
  @Input() parentForm: FormGroup;
  @Input() officePhoneNumber: AbstractControl;
  @Input() faxPhoneNumber: AbstractControl;
  @Input() emailAddress: AbstractControl;
  @Input() contactPerson: AbstractControl;
  OfficePhoneNumberLabel: string = 'Office Phone Number';
  OfficePhoneNumberClassName: string = 'officePhoneNumber';
  OfficePhoneNumberRequired: string = 'Office phone number is required.';
  OfficePhoneNumberPattern: string = 'Office phone number must contain 10 numbers. (e.g. XXX XXX XXXX)';
}

i think it is because you must assign an initial value to your @Input flaged variable but instead you can use \@Input var !: type ... — Drago Ban, Oct 04 '21 at 13:35

score 0 · Answer 2 · answered Oct 05 '21 at 07:03

0

i think it is because you must assign an initial value to your @Input flaged variable but instead you can use @Input var !: typee

answered Oct 05 '21 at 07:03

Drago Ban

105
1
8

TS2693 'string' only refers to a type, but is being used as a value here

2 Answers2