'mat-form-field' is not a known element - Angular 4 & Angular Material 2

Question

In my angular application, I have a presentation.module that holds all components. I have created a shared-material.module containing all angular material 2 modules used in the whole app. I have imported it in the previous presentation.module. In my app.module, I have imported the presentation.module.

The app.module have in its declaration app.component, header.component and footer.component

Here is my app.module :

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

Here is my presentation.module :

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

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

The source code of 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 {
}

As you can see bellow, I have registered a security-presentation.module, here is its source code:

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

My problem is when I attempt to use mat-input-field in the login.component (in the security-presentation.module ), i got this error:

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

But other angular material 2 components work fine in the app.component, header.component and footer.component:

app.component.html

<div>

  <app-header></app-header>

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

  <app-footer></app-footer>

</div>

Should I import shared-material.module in each presentation module or is there a way to fix this?

Thank you in advance.