error TS2742: The inferred type of 'username' cannot be named without a reference to '.../node_modules/@angular/forms/forms'

Question

forgot-password.component.ts(44,7): error TS2742: The inferred type of 'username' cannot be named without a reference to '.../node_modules/@angular/forms/forms'. This is likely not portable. A type annotation is necessary.

import { Component, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { User } from '../../models';
import { ValidateUsername } from '../../validators/userid-validator';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.scss']
})
export class ForgotPasswordComponent {
  forgotPasswordForm: FormGroup;
  @Output() resetPassword: EventEmitter<any> = new EventEmitter<any>();
  @Output() onSubmit: EventEmitter<User> = new EventEmitter<User>();
  constructor(private formBuilder: FormBuilder, private router: Router) {
    this.forgotPasswordForm = this.formBuilder.group({
      username: ['', [Validators.required, ValidateUsername]]
    });
  }
  get username() { return this.forgotPasswordForm.get('username'); }
  passwordToken(event$) {
    this.onSubmit.emit(event$.value);
  }
}

While running the applicationn, I'm getting error at this line 'get username() { return this.forgotPasswordForm.get('username'); }'

Answer 1

When it says

This is likely not portable. A type annotation is necessary.

Sometimes you need to check your tsconfig.json and see if is there anything wrong with "baseUrl", "paths" and linked packages too.

But in this case, TS is accusing that you have not typed it since it is in your ts config, so either you can type it as "any", create an interface for it or type as necessarily, in this case, as string.

Answer 2

You need to be explicit on the return type of the property.

get username(): AbstractControl { return this.forgotPasswordForm.get('username'); }

forgotPasswordForm is a FormGroup and its get() method returns an AbstractControl with the following subclasses

Subclasses

• FormArray
• FormControl
• FormGroup