Angular 5报错：'mat-toolbar' 不是已知元素问题咨询

你已经在搭建Angular Material的模块配置，但遇到组件未被识别的问题，这通常是模块导出或导入环节的疏漏，我来一步步帮你排查解决：

1. 完善Material模块的导出配置 #

你的material.module.ts里已经导入了MatToolbarModule，但需要把这些导入的模块对外导出，这样其他模块才能引用使用。修改你的文件如下：

import { NgModule } from '@angular/core';
import { 
  MatButtonModule, 
  MatMenuModule, 
  MatIconModule, 
  MatCardModule, 
  MatSidenavModule, 
  MatFormFieldModule, 
  MatInputModule, 
  MatTooltipModule, 
  MatToolbarModule 
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
  ],
  // 添加exports数组，将所有需要对外暴露的Material模块放入其中
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
  ]
})
export class MaterialModule { }

2. 在主模块（AppModule）中导入MaterialModule #

打开app.module.ts，确保你已经导入了刚才创建的MaterialModule，并将其加入到imports数组内：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Material组件依赖动画模块，必须添加
import { MaterialModule } from './material.module'; // 导入你的自定义Material模块

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 额外检查：确保Angular Material基础安装完成 #

如果你还没完成基础依赖安装，先确认执行过以下命令：

# 安装Angular Material、CDK和动画包
npm install @angular/material @angular/cdk @angular/animations

另外，若你的Angular版本为15+，Material的导入路径已改为按组件单独导入（比如import { MatToolbarModule } from '@angular/material/toolbar';），但旧版本的导入方式也能正常工作，核心问题还是前面的导出与主模块导入步骤。

完成以上操作后，重启Angular开发服务器（ng serve），mat-toolbar组件应该就能被正常识别了。

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