Angular中mat-toolbar等组件提示‘未知元素’问题求助

在Angular项目中，某组件使用mat-toolbar、MatSliderModule、MatListModule时，编译器抛出错误“mat-toolbar is not a known element”，但这些组件已在其他组件正常运行，Angular与Material版本兼容。以下是无报错和报错的组件及模块代码：

无报错组件代码 #

<mat-toolbar class="app-toolbar py-2" color="primary">
    <div class="flex items-center">
        <img class="w-8 sm:mx-8 mx-3" src="assets/images/logo/L-logo-angle-brut.png">
        <span>{{'Home.HomePage.header_who_are_us' | transloco}}</span>
    </div>
    <a class="button-toolbar sm:mr-4 mr-0" mat-flat-button (click)="redirection()">
        <span>{{'Home.HomePage.header_beta' | transloco}}</span>
        <mat-icon class="ml-2 icon-size-5" [svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
    </a>
</mat-toolbar>

无报错模块代码 #

import { NgModule } from '@angular/core';
import { Route, RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { SharedModule } from 'app/shared/shared.module';
import { LandingHomeComponent } from 'app/modules/landing/home/home.component';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseCardModule } from '@fuse/components/card';
import { MatCardModule } from "@angular/material/card";
import { landingHomeRoutes } from './home.routing';
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatGridListModule } from '@angular/material/grid-list';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    declarations: [
        LandingHomeComponent
    ],
    imports: [
        RouterModule.forChild(landingHomeRoutes),
        MatButtonModule,
        MatIconModule,
        SharedModule,
        MatButtonToggleModule,
        MatCheckboxModule,
        MatDividerModule,
        MatFormFieldModule,
        MatIconModule,
        MatInputModule,
        MatMenuModule,
        MatProgressBarModule,
        MatTooltipModule,
        FuseCardModule,
        SharedModule,
        MatCardModule,
        MatToolbarModule,
        MatGridListModule,
        TranslateModule
    ]
})
export class LandingHomeModule
{
}

报错组件代码 #

<div class="container">
    <mat-toolbar color="primary" class="main-toolbar">
        <span>Audio Player</span>
    </mat-toolbar>
</div>

报错模块代码 #

import { NgModule } from '@angular/core';
import { Route, RouterModule } from '@angular/router';
import { AudioPlayerComponent } from './audio-player.component';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseCardModule } from '@fuse/components/card';
import { SharedModule } from 'app/shared/shared.module';
import { MatCardModule } from '@angular/material/card';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { CommonModule } from '@angular/common';
import {MatListModule} from '@angular/material/list';
import {MatSliderModule} from '@angular/material/slider';

const audioPlayerRoutes: Route[] = [
    {
        path     : '',
        component: AudioPlayerComponent
    }
];

@NgModule({
    declarations: [
        AudioPlayerComponent,
    ],
    imports: [
        RouterModule.forChild(audioPlayerRoutes),
        MatButtonModule,
        MatButtonToggleModule,
        MatCheckboxModule,
        MatDividerModule,
        MatFormFieldModule,
        MatIconModule,
        MatInputModule,
        MatMenuModule,
        MatProgressBarModule,
        MatListModule,
        MatTooltipModule,
        FuseCardModule,
        MatSliderModule,
        SharedModule,
        MatCardModule,
        FlexLayoutModule,
        MatToolbarModule,
        CommonModule,
    ],
    exports: [
        AudioPlayerComponent
    ]
})
export class AudioPlayerModule
{
}

解决方法 #

• 调整模块导入顺序：将CommonModule移至imports数组最前端，Angular模块导入顺序可能影响组件识别优先级，确保基础模块先加载。
• 清理缓存并重启服务：执行命令ng cache clean清除Angular缓存，然后重启ng serve，缓存异常可能导致模块未被正确识别。
• 检查SharedModule导出配置：如果SharedModule中导入了Material相关模块，需确保这些模块被添加到exports数组中，否则其他模块无法通过导入SharedModule来使用这些组件。
• 排查重复导入冲突：虽然无报错模块存在重复导入（如MatIconModule、SharedModule），但报错模块需确保没有冲突的导入配置，避免模块加载异常。

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