web-dev-qa-db-fra.com

'mat-form-field' n'est pas un élément connu - Angular 4 & Angular Material 2

Dans mon angular, j'ai un presentation.module qui contient tous les composants. J'ai créé un shared-material.module contenant tous les angular 2 modules utilisés dans toute l'application. Je l'ai importé dans le précédent presentation.module. Dans mon app.module, J'ai importé le presentation.module.

Le app.module avoir dans sa déclaration app.component, header.component et footer.component

Voici mon app.module:

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

Voici mon presentation.module:

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

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

Le code source de 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 {
}

Comme vous pouvez le voir ci-dessous, j'ai enregistré un security-presentation.module, voici son code source:

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

Mon problème est lorsque j'essaie d'utiliser mat-input-field dans le login.component (dans le security-presentation.module), j'ai eu cette erreur:

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

Mais les autres composants angular matériels 2 fonctionnent bien dans le app.component, header.component et footer.component:

app.component.html

<div>

  <app-header></app-header>

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

  <app-footer></app-footer>

</div>

Dois-je importer shared-material.module dans chaque module de présentation ou existe-t-il un moyen de résoudre ce problème?

Merci d'avance.

angulartypescriptmoduleangular-material2
13
Laiso

Parce que votre module partagé doit d'abord importer les modules matériels:

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