title: Modules imported in AppModule aren't visible in different modules
body: <p>Let's say that this is my AppModule:</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      MaterialModule,
      HomeModule
    ],
    exports: [
      MaterialModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>As you can see I declared <code>MaterialModule</code> over the <code>HomeModule</code>, then I exported that <code>MaterialModule</code>.
  But still in <code>HomeModule</code> I cannot use components from <code>MaterialModule</code>, error:</p>
  
  <pre><code>1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
  2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 
  </code></pre>
  
  <p>So I'm forced to import <code>MaterialModule</code> again in <code>HomeModule</code>. Is it correct behavior or I'm doing something wrong?</p>
  
  <hr>
  
  <p>I changed Imports in <code>AppModule</code> as @maryrio7 suggested and now is <code>MaterialModule.forRoot()</code>, and I added static method to <code>MaterialModule</code>, still doesn't work.</p>
  
  <pre><code>@NgModule({
      imports: [
          MatButtonModule,
          MatCardModule,
          MatIconModule,
      ],
      exports: [
          MatButtonModule,
          MatCardModule,
          MatIconModule
      ]
  })
  export class MaterialModule {
      static forRoot(): ModuleWithProviders {
          return {
              ngModule: MaterialModule,
              providers: []
          };
      }
  }
  </code></pre>