title: Angular 2 multiple modules
body: <p>I have an app which has multiple views like one is spreadsheet &amp; other is the two-panel view, for both views navigation, searching &amp; filters will be common. So I added a common module and imported that module to the main module &amp; now trying to use common modules components in spreadsheet component. Well below is my code that will give the proper picture:</p>
  
  <pre><code>// Spreadsheet module - spreadsheet.module.ts
  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { BrowserModule }  from '@angular/platform-browser';
  import { Spreadsheet } from './components/spreadsheet.component';
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ Spreadsheet ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  })
  export class SpreadsheetModule { }
  
  // Common module - common.module.ts
  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { BrowserModule }  from '@angular/platform-browser';
  import { TopNavigation } from './components/header.component';
  import { Search } from './components/search.component';
  import { AccountInfo } from './services/accountInfo';
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ TopNavigation, Search ],
    providers: [ AccountInfo ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  })
  export class CommonModule {}
  </code></pre>
  
  <p>Now I am importing both this module to one main module which is:</p>
  
  <pre><code>// App module - app.module.ts
  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { BrowserModule }  from '@angular/platform-browser';
  import { AppComponent } from './app.component';
  import { CommonModule } from './common/common.module';
  import { SpreadsheetModule } from './spreadsheet/spreadsheet.module';
  
  @NgModule({
    imports: [ BrowserModule, CommonModule, SpreadsheetModule ],
    declarations: [ AppComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>So in my spreadsheet's component, I am trying to use header's (<code>TopNavigation</code>) template like <code>&lt;top-nav&gt;&lt;/top-nav&gt;</code> so this should show header.html content but its coming as blank. It's not giving any error as well. Not sure what I am doing wrong.</p>
  
  <p>Note: If I directly declare <code>TopNavigation</code> in <code>spreadsheet.module.ts</code> it works fine. But since navigation and search are common I don't want to declare it in every single modules that should only be in <code>app.module.ts</code></p>