title: When import MatButtonModule in main module.ts it is not working
body: <p>In app folder there are another another sub <code>module</code> called <code>login</code>.There is <code>login.component.ts</code>, <code>login.module.ts</code> and <code>login.component.html</code>. I want to use <code>angular-material</code> for <code>login.component.html</code>. If I import material component in <code>login.module.ts</code> then its working fine. But if I import in app.module.ts it is not working any more.</p>
  <h3>app.module.ts</h3>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  import {MatButtonModule} from '@angular/material/button';
  import { LoginModule }  from './login/login.module';
  import { AppComponent } from './app.component';
  import { loginRouting } from './login/login.routing';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,BrowserAnimationsModule,LoginModule,loginRouting,MatButtonModule
    ],
    exports: [MatButtonModule],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>That is my <code>app.module.ts</code>. My concert is that if I add the material component in root module that I need not to import it any <code>sub module</code> as all sub module is imported in root module. Please advice how to achieve this. And what is the problem in my code.</p>