Angular 'mat-tab' is not a known element

Question

I need help please. I’m sorry if what I’m asking has been already fixed here, but believe me I tried different solutions for example (this, and this) here but nothing works. And some solutions as (this) give me erros as Cannot find module '@angular/cdk/a11y' or its corresponding type declarations. I’m using Angular and I have this error:

Error: src/app/components/organisation/organisation.component.html:2:3 - error NG8001: 'mat-tab' is not a known element:
1. If 'mat-tab' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Let me show you my configurations

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppService } from './services/app.service';
import { AppRoutingModule } from './app-routing.module';
import { HeaderComponent } from './components/header/header.component';
import { DemoMaterialModule } from './material-module';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { OptionsComponent } from './components/options/options.component';
import { ChooseComponent } from './components/choose/choose.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AuthService } from './services/auth.service';
import { HttpClientModule } from '@angular/common/http';
import { LoginComponent } from './components/login/login.component';
import { WrongRouteComponent } from './components/wrong-route/wrong-route.component';

const config = {
  //config info hidden
};

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DashboardComponent,
    OptionsComponent,
    ChooseComponent,
    LoginComponent,
    WrongRouteComponent
  ],
  imports: [
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule,
    AngularFireAuthModule,
    DemoMaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    FlexLayoutModule,
    HttpClientModule
  ],
  providers: [AuthService, AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

DemoMaterialModule is imported from this file :

material-module.ts
import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
    exports: [
        A11yModule,
        ClipboardModule,
        CdkStepperModule,
        CdkTableModule,
        CdkTreeModule,
        DragDropModule,
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
        OverlayModule,
        PortalModule,
        ScrollingModule,
    ]
})
export class DemoMaterialModule { }

and this is my angular version :

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.29
Node: 14.15.4
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.29
@angular-devkit/core         8.3.29
@angular-devkit/schematics   8.3.29
@schematics/angular          8.3.29
@schematics/update           0.803.29
rxjs                         6.4.0

I’m using this version in order to work safely with PWA because I learned that the latest angular version has some problems with PWA.

Have you tried https://stackoverflow.com/a/50530120/9880356? — Giannis, Apr 06 '21 at 10:04
I don't see `organisation` component declaration in your AppModule. Which module does it belong to ? — Random, Apr 06 '21 at 10:15
@Giannis it is not required. Since DemoModule does not declare anything, it doesn't need to import anything. Exports work. — Random, Apr 06 '21 at 10:18
@ABDOURAHAMANEISSAKASANI where do you declare OrganisationComponent ? — Random, Apr 06 '21 at 10:18
oohh nooo, how can I make an error like this, thank you very much @Random — ABDOURAHAMANE ISSAKA SANI, Apr 06 '21 at 10:23
@Random I guess DemoMaterialModule is shared and the actual component is somewhere else. Otherwise, shouldn't there be something like declarations: [component] in DemoMaterialModule? — Giannis, Apr 06 '21 at 10:23
Surely I’m accustom with auto import and I’m very tired, I need to take a coffee right now — ABDOURAHAMANE ISSAKA SANI, Apr 06 '21 at 10:24
I added the OrganisationComponent declaration and the problem has been resolved @Random — ABDOURAHAMANE ISSAKA SANI, Apr 06 '21 at 10:26
@Giannis yes, the DemoModule is a shared module, with nothing in the `declarations` array. This is done to group all Material Modules you need in one module. This module is not intended to have anything in the `declarations` array. — Random, Apr 06 '21 at 10:33

Angular 'mat-tab' is not a known element

0 Answers0