Angular 4 + Material - 意外指令＆＃39; MdHorizo​​ntalStepper

Question

我试图在我的应用程序中使用角度材料水平步进器。我在https://material.angular.io/components/stepper/overview找到了它。

但是当我导入它时，我收到了这个错误。

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（我创建了这个文件，将所有材料模块都包含在一个地方）

```

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 {}

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

您无法仅在角度模块中导入指令@NgModule

所以它应该是：

import { MdStepperModule } from '@angular/material'

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

<强> Plunker Example