web-dev-qa-db-ja.com

'mat-form-field'は既知の要素ではありません-Angular 4＆Angular Material 2

angularアプリケーションには、すべてのコンポーネントを保持するpresentation.moduleがあります。アプリ全体で使用されるすべてのangularマテリアル2モジュールを含むshared-material.moduleを作成しました。前の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

ただし、他のangularマテリアル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をインポートする必要がありますか、またはこれを修正する方法はありますか？

前もって感謝します。

angulartypescriptmoduleangular-material2
13
Laiso

共有モジュールは最初に材料モジュールをインポートする必要があるため：

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