Angular项目中'mat-slide-toggle'未知元素错误排查求助

你的问题出在AppModule的declarations数组错误地包含了MatFormFieldModule——declarations只能用来声明当前模块自定义的组件、指令、管道，Angular Material的模块属于NgModule，必须放在imports数组中，不能放进declarations。

修正后的AppModule代码： #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
    // 移除了这里错误添加的MatFormFieldModule
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatSlideToggleModule,
    BrowserAnimationsModule
  ],
  exports: [
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

补充说明： #

• 你已经正确在imports中引入了MatSlideToggleModule和BrowserAnimationsModule（Angular Material组件必须依赖动画模块才能正常工作），这部分无需改动
• declarations数组仅用于注册当前模块自主创建的组件、指令、管道，外部依赖的模块必须放在imports数组中

内容的提问来源于stack exchange，提问作者user21357629