'mat-form-field'不是已知元素 - Angular 4&Angular Material 2

Question

在我的角度应用程序中,我有一个presentation.module包含所有组件.我创建了一个shared-material.module包含整个应用程序中使用的所有角度材料2模块.我在之前导入了它presentation.module.在我app.module,我已经导入了presentation.module.

在app.module其声明中有app.component,header.component而footer.component

这是我的app.module:

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    // Layer's modules
    PresentationModule,
    BusinessDelegateModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的presentation.module:

const modules = [
  SharedMaterialModule,
  SharedModule,
  HomePresentationModule,
  SecurityPresentationModule,
]

@NgModule({
  imports: [...modules],
  exports: [...modules]
})
export class PresentationModule {
}

源代码shared-material.module:

// updated: Before, i have just imported these modules without re-exporting them.
const materialModules = [
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatSidenavModule,
  MatFormFieldModule,
  MatInputModule,
  MatTooltipModule
];
@NgModule({
  imports: [...materialModules],
  exports: [...materialModules],
  declarations: []
})
export class SharedMaterialModule {
}

正如你可以看到的那样,我已经注册了一个security-presentation.module,这里是它的源代码:

@NgModule({
  imports: [
    SharedModule,
    SecurityRoutingModule
  ],
  declarations: [
    LoginComponent,
    RegisterComponent,
    EmailConfirmationComponent,
    PasswordResetComponent
  ]
})
export class SecurityPresentationModule {
}

我的问题是当我尝试mat-input-field在login.component(在security-presentation.module)中使用时,我得到了这个错误:

Uncaught Error: Template parse errors:
'mat-form-field' is not a known element

但其他角材料2组件在其中工作正常app.component,header.component并且footer.component:

app.component.html

<div>

  <app-header></app-header>

  <div class="main-container">
    <router-outlet></router-outlet>
  </div>

  <app-footer></app-footer>

</div>

我应该shared-material.module在每个演示模块中导入还是有办法解决这个问题？

先感谢您.

Answer 1

因为您的共享模块应首先导入材料模块:

const materialModules = [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule
];
@NgModule({
  imports: [...materialModules],
  exports: [...materialModules],
  declarations: []
})
export class SharedMaterialModule {
}