Export of name 'matAutocomplete' not found

Question

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 
}

}

Icily

Answer 1

Well, I needed to add "MatAutoComplete" under "declarations" on the specific spec file. In your case, I suppose it should be in "component.spec.ts".

This is how I did it

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ... , MatAutocomplete ],
      providers: [ ... ],
    })
    .compileComponents();
  });

Suzannasuzanne

Answer 2

I had the same problem. You can rebuild your application.

Holocrine

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Giovanna

Answer 3

After hours of searching and trying numerous methods, including recommended ones, I only found the solution using the method below :

@Directive({
    selector: 'mat-autocomplete',
    exportAs: 'matAutocomplete'
})
class DirectiveStub {}

Define 'DirectiveStub' exactly below imports area within its declaration.

Bacon