Автозаполнение Angular Material в версии 15.4.9 не работает

Я новичок в Angular. У меня проблема с функцией автозаполнения углового материала. Когда я пытаюсь его использовать, я всегда получаю ошибки. Я просто скопировал код из документации и тоже синхронизировал версии. Я также протестировал автозаполнение в другом проекте, который использует более новую версию материала Angular, и там все работало.

Сообщения об ошибках, которые я получаю:

'mat-autocomplete' is not a known element:
1. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)
projects.component.ts(16, 13): Error occurs in the template of component ProjectsComponent.
No directive found with exportAs 'matAutocomplete'.ngtsc(-998003)
projects.component.ts(16, 13): Error occurs in the template of component ProjectsComponent.

проекты.компонент.html

<div class = "filter-project-section">
        <mat-form-field appearance = "outline" style = "flex:1" class = "filter-form">
          <mat-label>Filter</mat-label>
          <input matInput [formControl] = "searchControl">
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
       
        <mat-autocomplete #auto = "matAutocomplete">
          <mat-option *ngFor = "let option of options" [value] = "option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
 
      </div>

project.comComponent.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged, Observable, startWith, switchMap,map } from 'rxjs';
import { Project } from '../_entites/project';
import { ProjectDataService } from '../_services/project.service';
import { ProjectEditComponent } from '../project-edit/project-edit.component';
import { MatDialog } from '@angular/material/dialog';
import { ProjectCreateComponent } from '../project-create/project-create.component';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
 
interface IDialogData {
  data: Project;
}
 
@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent {
  projects$ : Observable<Project[]>;
  searchControl = new FormControl<string>('');
  filteredProjects$ = this.searchControl.valueChanges.pipe(
    startWith(''),
    distinctUntilChanged(),
    debounceTime(1000),
    switchMap(value => {
      if (value === '') {
        return this.projects$; // Return all translations if the search input is empty
      }
      return this.filter(value as string);
    })
  );
 
  constructor(private projectService:ProjectDataService, private dialog: MatDialog) {
    this.projects$ = this.projectService.load();
  }

   //more code
}