Export of name 'matAutocomplete' not found

I am unable to understand what went wrong with my code, I imported the modules and still I am getting this error " Export of name 'matAutocomplete' not found"

Note: I restarted my IDE compiled again several times after importing MatAutocompleteModule, still the same.

here is app.module.ts - Pasted only the revelant part of the code

import {MatAutocompleteModule} from '@angular/material/autocomplete';
@NgModule({ declarations:[..xxxx....],
imports:[xx,xxx,MatAutocompleteModule],
providers:[xx,xx],
bootstrap: [AppComponent]})
export class AppModule { }

component.html

<form class="form-group-parent p-0" [formGroup]="frmStep1" (ngSubmit)="submit()">
       <mat-form-field class="example-full-width">
          <input type="text" placeholder="Ex. English" aria-label="Language" matInput
                    [formControl]="language" [matAutocomplete]="auto">
               <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                  <mat-option *ngFor="let option of languageList | async" [value]="option">
                        {{option}}
                  </mat-option>
                  </mat-autocomplete>
                 <mat-error>
                    <strong>Language</strong> is required.
                </mat-error>
       </mat-form-field>
</form>

component.ts

import {Component, OnInit} from '@angular/core';
import {FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

@Component({
  selector: 'xxxx',
  templateUrl: './cxx.component.html',
  styleUrls: ['./xxx.component.scss']
})

export class xxxComponent implements OnInit {

constructor(
 private pageTitle: Title,
 private router: Router,
 private fb: FormBuilder,
 private http: HttpClient,
) { this.createForm(); }

frm1:FormGroup;
frm2:FormGroup;
languageList: Array<any> = ['A','B','C','D','E']
filteredOptions: Observable<string[]>;

ngOnInit():void{
 this.filteredOptions = this.frmStep2.valueChanges.pipe(
  startWith(''),
  map(value => this._filter(value))
);

}

createForm(): object {
  this.frmStep1 = this.fb.group({
 language:[,[Validators.required]]
});
return frmStep1 :this.frmStep1 
}

}