Angular 4 + Matériel - directive inattendue 'MdHorizontalStepper

Question

J'essaie d'utiliser des matériaux angulaires horizontale pas à pas dans mon application. Je l'ai trouvé ici https://material.angular.io/components/stepper/overview. Mais quand j'importe je reçois cette erreur.

ERROR in Error: Unexpected directive 'MdHorizontalStepper in /var/www/project/desktop/node_modules/@angular/material/stepper/typings/index.d.ts' imported by the module 'MaterialModule in /var/www/project/desktop/src/app/material/material.module.ts'. Please add a @NgModule annotation. 
    at Error (native) 
    at syntaxError (/var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34) 
    at /var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:15582:44 
    at Array.forEach (native) 
    at CompileMetadataResolver.getNgModuleMetadata (/var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:15565:49) 
    at addNgModule (/var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:24408:58) 
    at /var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:24419:14 
    at Array.forEach (native) 
    at _createNgModules (/var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:26) 
    at analyzeNgModules (/var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:24293:14) 
    at analyzeAndValidateNgModules (/var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:24303:35) 
    at AotCompiler.analyzeModulesAsync (/var/www/project/desktop/node_modules/@angular/compiler/bundles/compiler.umd.js:23937:46) 
    at CodeGenerator.codegen (/var/www/project/desktop/node_modules/@angular/compiler-cli/src/codegen.js:32:14) 
    at Function.NgTools_InternalApi_NG_2.codeGen (/var/www/project/desktop/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30) 
    at _donePromise.Promise.resolve.then (/var/www/project/desktop/node_modules/@ngtools/webpack/src/plugin.js:386:44) 

material.module.ts (I créé ce fichier à tous les modules matériels en un seul endroit)

`` `

import { NgModule } from '@angular/core'; 

import { 
    MdButtonModule, 
    MdMenuModule, 
    MdToolbarModule, 
    MdIconModule, 
    MdCardModule, 
    MdHorizontalStepper, 
} from '@angular/material'; 

@NgModule({ 
    imports: [ 
    MdButtonModule, 
    MdMenuModule, 
    MdToolbarModule, 
    MdIconModule, 
    MdCardModule, 
    MdHorizontalStepper, 
    ], 
    exports: [ 
    MdButtonModule, 
    MdMenuModule, 
    MdToolbarModule, 
    MdIconModule, 
    MdCardModule, 
    MdHorizontalStepper, 
    ] 
}) 
export class MaterialModule {} 

de app.module.ts

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

import { AppComponent } from './app.component'; 

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { MaterialModule } from './material/material.module'; 
import { RegisterComponent } from './components/register/register.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    RegisterComponent 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    MaterialModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

Vous ne pouvez pas importer de directive dans le module angulaire uniquement @NgModule

il devrait donc être:

import { MdStepperModule } from '@angular/material' 

@NgModule({ 
    imports: [ 
    ... 
    MdStepperModule 
    ] 
    ... 
}) 

Plunker Example