title: 'mat-form-field' is not a known element - Angular 4 & Angular Material 2
body: <p>In my angular application, I have a <code>presentation.module</code> that holds all components. I have created a <code>shared-material.module</code> containing all angular material 2 modules used in the whole app. I have imported it in the previous <code>presentation.module</code>. In my <code>app.module</code>, I have imported the <code>presentation.module</code>. </p>
  
  <p>The <code>app.module</code> have in its declaration <code>app.component</code>, <code>header.component</code> and <code>footer.component</code></p>
  
  <p>Here is my <code>app.module</code> :</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent
    ],
    imports: [
      // Layer's modules
      PresentationModule,
      BusinessDelegateModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Here is my <code>presentation.module</code> :</p>
  
  <pre><code>const modules = [
    SharedMaterialModule,
    SharedModule,
    HomePresentationModule,
    SecurityPresentationModule,
  ]
  
  @NgModule({
    imports: [...modules],
    exports: [...modules]
  })
  export class PresentationModule {
  }
  </code></pre>
  
  <p>The source code of <code>shared-material.module</code> : </p>
  
  <pre><code>// 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 {
  }
  </code></pre>
  
  <p>As you can see bellow, I have registered a <code>security-presentation.module</code>, here is its source code:</p>
  
  <pre><code>@NgModule({
    imports: [
      SharedModule,
      SecurityRoutingModule
    ],
    declarations: [
      LoginComponent,
      RegisterComponent,
      EmailConfirmationComponent,
      PasswordResetComponent
    ]
  })
  export class SecurityPresentationModule {
  }
  </code></pre>
  
  <p>My problem is when I attempt to use <code>mat-input-field</code> in the <code>login.component</code> (in the <code>security-presentation.module</code> ), i got this error: </p>
  
  <pre><code>Uncaught Error: Template parse errors:
  'mat-form-field' is not a known element
  </code></pre>
  
  <p>But other angular material 2 components work fine in the <code>app.component</code>, <code>header.component</code> and <code>footer.component</code>:</p>
  
  <p><code>app.component.html</code></p>
  
  <pre><code>&lt;div&gt;
  
    &lt;app-header&gt;&lt;/app-header&gt;
  
    &lt;div class="main-container"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  
    &lt;app-footer&gt;&lt;/app-footer&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Should I import <code>shared-material.module</code> in each presentation module or is there a way to fix this?</p>
  
  <p>Thank you in advance.</p>