Обнаружение множественной ошибки, такой как 'mat-form-field', не является известным элементом и препятствует загрузке веб-страницы.

Question

Я новичок в angular и изучаю его последние несколько дней.

Приложение содержит следующее:
Модуль приложения
--- Макет модуля
------ Модуль клиента (все компоненты клиента)
------ Настольный модуль

Модуль клиента и модуль таблицы являются функциональными модулями. Я импортировал html из компонента таблицы и изменил детали в соответствии с компонентом клиента. Но я сталкиваюсь с несколькими сообщениями об ошибках при загрузке страницы, которые я прикрепил в конце этого вопроса. Я не уверен, почему поле mat-form-field или ошибка, такая как источник данных, вызывают ошибку, и я не могу загрузить страницу. Я не уверен, почему эта ошибка возникает после ее импорта (MatFormFieldModule) в файл CustomerModule.ts. Пожалуйста, дайте мне знать, что я делаю не так?

Код для каждого модуля и других файлов

CustomerModule.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CustomerRoutingModule } from './customer-routing.module';
import { EditCustomerComponent } from '../Customer/edit-customer/edit-customer.component';
import { MatInputModule, MatTableModule, MatPaginatorModule, MatFormFieldModule } from '@angular/material';
import { AllCustomerComponent } from '../Customer/all-customer/all-customer.component';

@NgModule({
  declarations: [ EditCustomerComponent, AllCustomerComponent],
  imports: [
    CommonModule,
    CustomerRoutingModule,
    MatTableModule,
    MatFormFieldModule,
    MatPaginatorModule,
    MatInputModule
  ]
})
export class CustomerModule { }

AllCustomerComponent.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Customer } from 'src/app/Models/customer';
import { CustomerService } from '../Service/customer.service';

@Component({
  selector: 'app-all-customer',
  templateUrl: './all-customer.component.html',
  styleUrls: ['./all-customer.component.scss']
})
 export class AllCustomerComponent implements OnInit {

displayedColumns = ['Id', 'CustomerName', 'CustomerEmailID', 'CustomerPhNo'];
dataSource: MatTableDataSource<Customer>;
public  customers: Customer[] = [];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

constructor(private customerService: CustomerService) {
    this.dataSource = new MatTableDataSource(this.customers);
}

ngOnInit() {
  this.customerService.getGetAllCustomers().subscribe(data => {
    this.dataSource = new MatTableDataSource(data);
  });
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
    if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
    }
}
}

AllCustomerComponent.html

<mat-form-field> 
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" /> 
</mat-form-field>

<div class="mat-elevation-z8">
   <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="Id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
      <td mat-cell *matCellDef="let row">{{ row.Id }}</td>
      </ng-container>
      <ng-container matColumnDef="FirstName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{ row.FirstName }}</td>
      </ng-container>

      <ng-container matColumnDef="Email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Email ID</th>
      <td mat-cell *matCellDef="let row">{{ row.Email }}</td>
      </ng-container>

      <ng-container matColumnDef="PhoneNumber">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</th>
      <td mat-cell *matCellDef="let row">{{ row.PhoneNumber }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>

<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

CustomerService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpErrorResponse } from 
'@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry, map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { HttpHeaderService } from 'src/app/Services/http-header.service';
import { HandleError, HttpErrorHandlerService } from 'src/app/Services/http- 
error-handler.service';

@Injectable({
     providedIn: 'root'
    })
export class CustomerService {
   private baseUrl: string = environment.baseUrl + 'Customer/';
   private handleError: HandleError;

 constructor(
    private http: HttpClient,
    private httpHeaderService: HttpHeaderService,
    private httpErrorHandlerService: HttpErrorHandlerService
    ) {
        this.handleError = 
        httpErrorHandlerService.createHandleError('customerService');
      }

    getGetAllCustomers(): Observable<any> {
        const url: string = this.baseUrl + 'GetAll';
        return this.http.get<any>(url, 
        this.httpHeaderService.getHttpHeader()).pipe(
        retry(environment.retryAttempt),
        catchError(this.handleError('getGetAllCustomers', 'Error'))
    );
    }
    }

Полное сообщение об ошибке из браузера:

Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part 
of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
to the '@NgModule.schemas' of this component to suppress this message. (" 
[ERROR ->]<mat-form-field> 
<input matInput (keyup)="applyFilter($event.target.value)" 
placeholder="Filter" /"): 
ng:///CustomerRoutingModule/AllCustomerComponent.html@0:0
Can't bind to 'dataSource' since it isn't a known property of 'table'. ("

<div class="mat-elevation-z8">
  <table mat-table [ERROR ->][dataSource]="dataSource" matSort>
    <ng-container matColumnDef="Id">
     <th mat-header-cell *ma"): 
 ng:///CustomerRoutingModule/AllCustomerComponent.html@5:19
Can't bind to 'matHeaderRowDef' since it isn't a known property of 'tr'. ("
</ng-container>

<tr mat-header-row [ERROR ->]*matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColu"): ng:///CustomerRoutingModule/AllCustomerComponent.html@25:23
Property binding matHeaderRowDef not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
</ng-container>

[ERROR ->]<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; col"): ng:///CustomerRoutingModule/AllCustomerComponent.html@25:4
Can't bind to 'matRowDefColumns' since it isn't a known property of 'tr'. ("

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row [ERROR ->]*matRowDef="let row; columns: displayedColumns"></tr>

"): ng:///CustomerRoutingModule/AllCustomerComponent.html@26:16
Property binding matRowDefColumns not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
[ERROR ->]<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

 "): ng:///CustomerRoutingModule/AllCustomerComponent.html@26:4
 Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'.
 1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
 2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
 </table>

  <mat-paginator [ERROR ->][pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
 </div>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:17
Can't bind to 'pageSizeOptions' since it isn't a known property of 'mat-paginator'.
1. If 'mat-paginator' is an Angular component and it has 'pageSizeOptions' input, then verify that it is part of this module.
2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</table>

<mat-paginator [pageSize]="10" [ERROR ->][pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:33
'mat-paginator' is not a known element:
1. If 'mat-paginator' is an Angular component, then verify that it is part of this module.
2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:2
at syntaxError (compiler.js:2427)
at 

Answer 1

Мне удалось решить эту проблему. Кажется, Visual Studio Code неправильно добавил детали импорта.

Пример: путь к файлу layout-> Customer-> EditCustomerComponent

import { EditCustomerComponent } from './customer/edit-customer/edit-customer.component';

Добавлена ​​Visual Studio -

import { EditCustomerComponent } from './Customer/Edit-customer/edit-customer.component';

Customer должен был быть customer , который имеет c маленькую букву . После смены начал работать. Код Visual Studio имеет тенденцию делать это несколько раз, и мне пришлось вручную изменять его. Я не уверен, что что-то не так с моими настройками.

Спасибо за помощь :)