未捕获的错误：模板解析错误：'mat-label' 不是已知元素：

Posted 2023-03-13

【中文标题】未捕获的错误：模板解析错误：\'mat-label\' 不是已知元素：

【英文标题】：Uncaught Error: Template parse errors: 'mat-label' is not a known element:未捕获的错误：模板解析错误：'mat-label' 不是已知元素：

【发布时间】：2021-03-25 19:50:28

【问题描述】：

我想写 aboute datepicker 但我收到以下错误：

未捕获的错误：模板解析错误：'mat-label' 不是已知元素：

如果“mat-label”是一个 Angular 组件，则验证它是该模块的一部分。 如果“mat-label”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

app.module.ts

import  MatDatepickerModule  from '@angular/material/datepicker';
import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  NavbarComponent  from './components/navbar/navbar.component';
import  LoginComponent  from './pages/login/login.component';
import  RouterModule, Routes  from '@angular/router';
import  HomeComponent  from './pages/home/home.component';
import  SignupComponent  from './pages/signup/signup.component';
import  ProfileComponent  from './pages/profile/profile.component';
import  AngularFireModule  from 'angularfire2';
import  AngularFireAuthModule  from 'angularfire2/auth';
import  AngularFireDatabase, AngularFireObject  from 'angularfire2/database';
import  AngularFirestoreModule  from 'angularfire2/firestore';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  environment  from 'src/environments/environment';
import  AuthService  from './services/auth/auth.service';
import  AuthGuard  from './guards/auth.guard';
import  AlertModule  from '../app/_alert/alert.module';
import  HomeLayoutComponent  from './layouts/home-layout/home-layout.component';
import  LoginLayoutComponent  from './layouts/login-layout/login-layout.component';
import  StaffComponent  from './pages/staff/staff.component';
import  RegisterStaffComponent  from './pages/register-staff/register-staff.component';
import  AddTicketComponent  from './pages/add-ticket/add-ticket.component';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';


export const router: Routes = [
  
    path: '',
    component: HomeLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      
        path: '',
        component: HomeComponent
      ,
      
        path: 'staff',
        component: StaffComponent
      ,
      
        path: 'register-staff',
        component: RegisterStaffComponent
      ,
      
        path: 'add-ticket',
        component: AddTicketComponent
      ,
      
        path: 'profile',
        component: ProfileComponent,
        canActivate: [AuthGuard]
      
    ]
  ,
  
    path: '',
    component: LoginLayoutComponent,
    children: [
      
        path: 'login',
        component: LoginComponent
      ,
      
        path: 'signup',
        component: SignupComponent
      ,
    ]
  
];

@NgModule(
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    NavbarComponent,
    ProfileComponent,
    SignupComponent,
    StaffComponent,
    RegisterStaffComponent,
    HomeLayoutComponent,
    LoginLayoutComponent,
    AddTicketComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    AppRoutingModule,
    AlertModule,
    RouterModule.forRoot(router),
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    MatDatepickerModule,
    BrowserAnimationsModule,
  ],
  providers: [AuthService, AngularFireDatabase, AuthGuard],
  bootstrap: [AppComponent],
)

export class AppModule  

【问题讨论】：

您是否在其他模块中的某些组件中使用'mat-select'它？

【参考方案1】：

需要为mat-label导入MatFormFieldModule：Form field appearance variants

可以通过添加 mat-label 元素来指定表单字段的标签。

This *** question 和 this *** question 也可以提供帮助。