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

Question

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

Answer 1

This will depend on the version of angular material that's used. When using 11.x, you need to select one of two variants:

Stepper variants

There are two stepper components:

mat-horizontal-stepper and mat-vertical-stepper. They can be used the same way. The only difference is the orientation of stepper.

However, since version 12.x, you still have the same variants, but you now have an additional mat-stepper, where you can dynamically set the orientation:

Stepper variants

There are two stepper variants: horizontal and vertical. You can switch between the two using the orientation attribute.

Static example:

<mat-stepper orientation="vertical"

Dynamic example:

HTML

<mat-stepper
  class="example-stepper"
  [orientation]="(stepperOrientation | async)!">

Component

constructor(private _formBuilder: FormBuilder, breakpointObserver: BreakpointObserver) {
    this.stepperOrientation = breakpointObserver.observe('(min-width: 800px)')
      .pipe(map(({matches}) => matches ? 'horizontal' : 'vertical'));
  }

For full example, see Responsive Stepper.

Answer 2

I've tried them all, but this solution works:

Use mat-vertical-stepper have the same properties of mat-stepper and you can choose, vertical or horizontal.

Answer 3

Try exporting in the Material components in the shared module.

in your shared.module.ts

exports: [...MaterialComponents]