Components: No provider for MatStepper

[Trucc]

Bug, feature request, or proposal:

I wanted to use the MatStepper, so according to the documentation, here is what i've done

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

//Lots of interesting imports;

import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogRef } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatStepperModule} from '@angular/material/stepper';

import { AddCapteurDialog } from './dialogs/addCapteur/addCapteur.component';

const ANGULAR_MATERIAL_IMPORTED_LIST = [
  //Several module import
  MatDialogModule,
  MatFormFieldModule,
  MatInputModule,
  MatStepperModule
]

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...ANGULAR_MATERIAL_IMPORTED_LIST
  ],
  declarations: [MapviewComponent, AddNodeDialog, ConfirmDialog, AddCapteurDialog],
  entryComponents: [
     // Here comes my dialogs
    AddCapteurDialog,
  ],
  providers: [
    {
      provide: MatDialogRef,
      useValue: {
        close: (dialogResult: any) => { }
      }
    },
    {
      provide: MAT_DIALOG_DEFAULT_OPTIONS,
      useValue: {hasBackdrop: true}
    }
  ],
  exports : [MapviewComponent],
  bootstrap: [MapviewComponent]
})
export class MapviewModule { }

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-addCapteur',
  templateUrl: './addCapteur.component.html',
  styleUrls: ['./addCapteur.component.scss']
})
export class AddCapteurDialog implements OnInit {
  general:FormGroup
  constructor(public dialogref: MatDialogRef<AddCapteurDialog> ,private fb:FormBuilder) { }

  ngOnInit() {
    this.general = this.fb.group({
      name: ['', Validators.required],
      description : ['', Validators.required]
    });
  }

}

<h1 mat-dialog-title>
  {{title}}
</h1>
<mat-dialog-content>
    <mat-horizontal-stepper [linear]=true #stepper>
    <mat-step label="Step 1" [stepControl]="general" [editable]=true>
      <form [formGroup]="general">
        <ng-template matStepLabel>Commençons par les bases...</ng-template>
        <mat-form-field>
          <mat-label>Nom du capteur</mat-label>
          <input matInput [(ngModel)]="name" formControlName="name" required>
          <mat-hint>Identifions le capteur...</mat-hint>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Description</mat-label>
          <input matInput [(ngModel)]="description" formControlName="description" required>
          <mat-hint>Que fait ce capteur ?</mat-hint>
        </mat-form-field>
        <div>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>
  </mat-horizontal-stepper>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close color="warn" (click)="dialogRef.close()">Annuler</button>
  <button mat-button matStepperNext color="primary" (click)="submit()">Ajouter le capteur</button>
</mat-dialog-actions>

Please unederstand that i don't show you the MapViewComponent, because the only beahvior youhave to understand is that it open the Dialog, and this work well

What is the expected behavior?

Make this component work

What is the current behavior?

I have this error :
Error: StaticInjectorError(AppModule)[CdkStepper -> MatStepper]:
core.js:1034
StaticInjectorError(Platform: core)[CdkStepper -> MatStepper]:
NullInjectorError: No provider for MatStepper!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:1034:1)
at resolveToken (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:1271:1)
at tryResolveToken (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:1216:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:1113:1)
at resolveToken (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:1271:1)
at tryResolveToken (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:1216:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:1113:1)
at resolveNgModuleDep (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:8161:1)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:8849:1)
at resolveNgModuleDep (d:\repositories\hweb_client\node_modules\@angular\core\fesm5\core.js:8161:1)

What are the steps to reproduce?

https://stackblitz.com/edit/matstepper-no-providers

This is the best i was able to do for the stackblitz. If someone is able to debug it to make able to reproduce perfectly my behavior, it would be good

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6

Is there anything else we should know?

[jelbourn]

Here's an example of a stepper working inside of a dialog: https://stackblitz.com/edit/angular-krbxvf?file=app/dialog-overview-example.ts

[Trucc]

Thanks jelbourn, so the problem was the surrounding tag mat-dialog-content tag.

<mat-horizontal-stepper [linear]=true #stepper>
    <mat-step label="Step 1" [stepControl]="general" [editable]=true>
      <form [formGroup]="general">
        <ng-template matStepLabel>Commençons par les bases...</ng-template>
        <mat-form-field>
          <mat-label>Nom du capteur</mat-label>
          <input matInput [(ngModel)]="name" formControlName="name" required>
          <mat-hint>Identifions le capteur...</mat-hint>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Description</mat-label>
          <input matInput [(ngModel)]="description" formControlName="description" required>
          <mat-hint>Que fait ce capteur ?</mat-hint>
        </mat-form-field>
        <div>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>
  </mat-horizontal-stepper>

will work while

<mat-dialog-content>
<mat-horizontal-stepper [linear]=true #stepper>
    <mat-step label="Step 1" [stepControl]="general" [editable]=true>
      <form [formGroup]="general">
        <ng-template matStepLabel>Commençons par les bases...</ng-template>
        <mat-form-field>
          <mat-label>Nom du capteur</mat-label>
          <input matInput [(ngModel)]="name" formControlName="name" required>
          <mat-hint>Identifions le capteur...</mat-hint>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Description</mat-label>
          <input matInput [(ngModel)]="description" formControlName="description" required>
          <mat-hint>Que fait ce capteur ?</mat-hint>
        </mat-form-field>
        <div>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>
  </mat-horizontal-stepper>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close color="warn" (click)="dialogRef.close()">Annuler</button>
  <button mat-button matStepperNext color="primary" (click)="submit()">Ajouter le capteur</button>
</mat-dialog-actions>

will generate my no provider error. I updated the stackblitz.

Do you know why this error occurs ?

[jelbourn]

The error is from trying to put matStepperNext outside of the parent stepper component.

If you don't want the next button inside the step, you can do something like

<mat-horizontal-stepper [linear]=true #stepper>
  ...
</mat-horizontal-stepper>

<mat-dialog-actions>
  ...
  <button mat-button color="primary" (click)="stepper.next()">Ajouter le capteur</button>
</mat-dialog-actions>

[Trucc]

Oh yes, i see. Thanks a lot !

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}