Angular单个组件导入MatToolbarModule失效问题及解决提示

云原生阿岚

2026-5-19

解决Angular中单个组件导入MatToolbarModule不生效的问题

刚入门Angular遇到这种组件导入问题太正常啦！我来帮你理清楚为什么会这样，以及怎么解决——

你的问题回顾

你尝试在单个navbar组件的.ts文件里导入MatToolbarModule，想在navbar.component.html里使用<mat-toolbar>组件，但完全没效果；反而在app.module.ts里导入该模块后，在index.html里使用就正常，还收到了错误提示：

"If 'mat-toolbar' is an Angular component, then verify that it..."

问题根源&解决方案

首先要明确：Angular组件不能直接在自身的.ts文件中导入模块，模块必须在所属的NgModule的imports数组中声明，组件才能访问到模块里的指令和组件。另外，你可能之前用了废弃的angular-material包，现在官方已经改用@angular/material了，这也是新手常踩的坑！

步骤1：确保安装正确的Material包

先卸载旧的废弃包（如果装过的话）：

npm uninstall angular-material

安装官方最新的Material和CDK包：

npm install @angular/material @angular/cdk

步骤2：正确导入MatToolbarModule

如果你想让navbar组件使用<mat-toolbar>，需要在该组件所属的模块（比如AppModule）里导入MatToolbarModule，还要记得导入BrowserAnimationsModule——Material组件依赖它才能正常工作：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// 注意导入路径是@angular/material/toolbar，不是旧的angular-material
import { MatToolbarModule } from '@angular/material/toolbar';

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

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 必须添加
    MatToolbarModule // 在这里导入MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：在navbar组件中正常使用

现在你就可以在navbar.component.html里放心使用<mat-toolbar>了：

<mat-toolbar color="primary">
  <span>我的自定义导航栏</span>
</mat-toolbar>

额外小贴士

如果你的项目有多个组件需要使用Material组件，建议创建一个SharedModule，把所有常用的Material模块导入并导出，然后在其他功能模块里导入SharedModule即可，这样不用重复导入，代码更规范~

内容的提问来源于stack exchange，提问作者Aymane EL Jahrani