mat-toolbar 不是已知元素

Question

i'm having a weird issue, i want to use mat-toolbar in a component (i'm already using mat-toolbar in another so the version of angular and material is, i think compatible) but the compiler have an error "mat-toolbar is not a known element".

here is a component who doesn't have any error about mat-toolbar:

<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>

and his module:

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
{
}

and the one who trigger the error:

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

and the module:

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
{
}

the MatSliderModule and MatListModule have the same issue but i didn't past the code, i guess it's the same problem. i'm really stuck any help would be appreciated...

Answer 1

remove

exports: [
        AudioPlayerComponent
    ]

also check whether you already included the tooltip related modules in SharedModule . If yes, then remove there.