error NG8001: 'mat-form-field' is not a known element

Question

Currently I am struggling with an error after try to use a few mat components like "mat-form-field" or "mat-date-range-input" etc.. I've already imported them in the app.module file as I always do with these kind of component, but I get many errors like this:

If 'mat-form-field' is an Angular component, then verify that it is part of this module If 'mat-label' is an Angular component, then verify that it is part of this module.

I have to say that in the same project I am using mat-tab-group and mat-tab etc... and I have not any errors with them.

These is my code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularMaterialModule } from './angular-material.module/angular-material.module.module';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/';
import { MatIconModule } from '@angular/material/icon';
import { ClipboardModule } from '@angular/cdk/clipboard';

@NgModule({
  declarations: [], // I've omitted this part because is not relevant to this issue
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularMaterialModule,
    MatProgressSpinnerModule,
    MatButtonToggleModule,
    MatSlideToggleModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    ClipboardModule
  ],
  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

And my component : create.report.component.html

<mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="reportForm" [rangePicker]="picker">
      <input matStartDate formControlName="from" placeholder="Start date">
      <input matEndDate formControlName="to" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
  

  </mat-form-field>

create.report.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-report',
  templateUrl: './create.report.component.html'
})
export class CreateReportComponent implements OnInit {
  reportForm = new FormGroup({
    from: new FormControl(),
    to: new FormControl()
  });
  
  constructor(
    private router: Router,
    private fb: FormBuilder) {
      this.buildForm();

    }

  ngOnInit(): void {
  }



  buildForm() {
    // console.log('***buildForm this.hmService***', this.hmService);

    this.reportForm = this.fb.group( {
      from  : [ '', [Validators.required, Validators.minLength(5)]],
      to: [ '', [Validators.required, Validators.minLength(5)]],
      published  : [ '', [Validators.required, Validators.minLength(5)]]
   
    });
  }

}

question from:https://stackoverflow.com/questions/65840992/error-ng8001-mat-form-field-is-not-a-known-element

Answer 1

Ok, finally I solved! With this line I fix the issue I had with material components. Now I can use them in my create.report.component . import { CreateReportComponent } from './pages/report/create/create.report.component';