Angular – error NG8001: 'mat-step' is not a known element

Issue

In my Angular-11 project, I have this in SharedModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
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';

const MaterialComponents = [
    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,
    PortalModule,
    ScrollingModule
]

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MaterialComponents,
    FormsModule,
    RouterModule
  ],
  exports: [
    MaterialComponents
  ]
})
export class SharedModule { }

Then, in AuthModule, I have:

import { SharedModule } from ‘../../shared/shared.module’;

@NgModule({
  declarations: [
    AuthComponent,
    LoginContactAdminComponent,
    SignupComponent,
    LoginComponent,
    LoginResetResponseComponent,
    SignupCompanyComponent,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    AppInputModule,
    ErrorModule,
    ReactiveComponentModule
  ],
  imports: [
    CommonModule,
    SharedModule,
    CoreModule,
    AuthRoutingModule
  ]
})
export class AuthModule { }

In the AuthModule, I also have this component SignupCompany with this codd:

signup-component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-signup-company',
  templateUrl: './signup-company.component.html',
  styleUrls: ['./signup-company.component.scss']
})
export class SignupCompanyComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
 }
}

signup-component.html:

    <mat-horizontal-stepper linear #stepper>

      <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        <p>You are now done.</p>
        <div class="card-footer">
          <button mat-button matStepperPrevious>Back</button>
          <button mat-raised-button color="primary">Save and Proceed</button>
        </div>
      </mat-step>          
    </mat-horizontal-stepper>

But I go this error:

Error: src/app/auth/pages/signup-company/signup-company.component.html:11:9 – error NG8001: ‘mat-horizontal-stepper’ is not a known element:

  1. If ‘mat-horizontal-stepper’ is an Angular component, then verify that it is part of this module.
  2. If ‘mat-horizontal-stepper’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

11 <mat-horizontal-stepper linear #stepper>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/auth/pages/signup-company/signup-company.component.ts:5:16
5 templateUrl: ‘./signup-company.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component SignupCompanyComponent.

Error: src/app/auth/pages/signup-company/signup-company.component.html:13:11 – error NG8001: ‘mat-step’ is not a known element:

  1. If ‘mat-step’ is an Angular component, then verify that it is part of this module.
  2. If ‘mat-step’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

13
~~~~~~~~~~

src/app/auth/pages/signup-company/signup-company.component.ts0m:5:16
5 templateUrl: ‘./signup-company.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component SignupCompanyComponent.

How do I resolve it?

Thanks

Solution

Try exporting in the Material components in the shared module.

in your shared.module.ts

exports: [...MaterialComponents]

Answered By – Akash Kriplani

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.