Angular 2 material Stepper is not working

Question

Hi I am working on an Angular 2 project and using material modules a lot. For some reason i cant able to even import the Stepper module to my project. So I endup importing the entire material modules as below:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { StepperComponent } from './stepper.component';
import { MaterialModule } from '@angular/material';


@NgModule({
  imports: [CommonModule, MaterialModule],
  declarations: [StepperComponent],
  exports: [StepperComponent]
})

export class StepperModule {}

and i used it in my html just as below to test its imported

<mat-horizontal-stepper></mat-horizontal-stepper>

Then I am getting the following error,

polyfills.dll.js:24743 Unhandled Promise rejection: Template parse errors:
'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. ("[ERROR ->]<mat-horizontal-stepper></mat-horizontal-stepper>"): t@0:0 ; Zone: <root> ; Task: Promise.then ; Value: 

I able to use a lot of material modules. Only problem with this one. Any idea guys? Thanks in advance.

Answer 1

Are you sure you are importing the modules correctly? Make sure that in your app.module.ts, you have the import to MatStepperModule and NOT MaterialModule (which was removed from 2.0.0-beta.11, see here):

import { MatStepperModule } from '@angular/material';

@NgModule({
    imports: [
        MatStepperModule,
        // ...
    ]
})

The reason why it did not work is because the stepper component was a new addition from 2.0.0-beta.11 (see the changelog for more info and as said above, removes MaterialModule)

Answer 2

I also had this problem.

The reason for me was that I was reading the documentation for Angular Material 12.1.1 which advices to use the mat-stepper component selector with the orientation binding.

In my project, I was actually using Angular Material 9.2.4 which used the old component mat-horizontal-stepper selector.

So try checking the Angular Material version you are using against the relevant version of the documentation,