Solução: "Object is possibly null" para novas versões do Angular CLI

Estou utilizando a versão 13 do Angular CLI, não sei se exatamente nesta versão, mas em algum momento a nomenclatura de

loginForm.get('userName').errors.required

Se torna:

loginForm.get('userName').errors['required']

E então utilizar o operador '?' não funciona mais, pois errors é chamado desde o começo procurando o atributo required, ou seja, poderá ser null | undefined desde o começo

Fiz a seguinte solução, criei o método Validate em SignInComponent, como segue:

Validate(name: string): boolean {
    const nameHasError = this.loginForm.get(name)?.hasError('required')
    if (nameHasError) { return nameHasError} else { return false }
  }

Ainda assim, nameHasError poderá ser boolean ou undefined, por isto o bloco if abaixo, que faz a verificação e retorna sempre um boolean

Por fim, os componentes HTML ficarão assim:

<small *ngIf="Validate('userName')" class="text-danger d-block">User name is required</small>

e

<small *ngIf="Validate('password')" class="text-danger d-block">Password is required</small>

Observação: Nesta versão do Angular, a declaração de um FormGroup é um pouco diferente da utilizada pelo instrutor, segue a declaração do meu componente

export class SignInComponent implements OnInit {

  loginForm: FormGroup

  constructor(private formBuilder: FormBuilder,) {
    this.loginForm = new FormGroup({
      userName: new FormControl(''),
      password: new FormControl('')
    })
  }


  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      userName: ['', Validators.required],
      password: ['', Validators.required]
    })
  }

  Validate(name: string): boolean {
    const nameHasError = this.loginForm.get(name)?.hasError('required')
    if (nameHasError) { return nameHasError} else { return false }
  }

}

Espero ter ajudado