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

Question

在我的 Angular 应用程序中，我有一个包含所有组件的 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 {
}

我的问题是当我尝试在 login.component （在 security-presentation.module 中）使用 mat-input-field 时，我收到了这个错误：

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