title: Angular exported component from module not useable in another module
body: <p>I am exporting a custom component in my AppModule but can not use it in another module, which is being imported in the AppModule. I thought exported components are visible globally?</p>
  
  <p>I am trying to use the CalendarComponent with the selector 'app-calendar' in a component within the TestModule.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>@NgModule({
    declarations: [ ... ,
      CalendarComponent,
    ],
    imports: [ ... ,
      TestModule,
    ],
    exports: [ ...
      CalendarComponent,
    ],
    providers: [ ... ],
    bootstrap: [AppComponent]
  })
  </code></pre>
  
  <p>test.module.ts</p>
  
  <pre><code>@NgModule({
    declarations: [ ... ,
      TestComponent
    ],
    imports: [ ... ],
    exports: [ ... ],
    providers: [ ... ]
  })
  </code></pre>
  
  <p>test.component.html</p>
  
  <pre><code>&lt;app-calendar&gt;&lt;/app-calendar&gt;
  </code></pre>
  
  <p>Console throws the error that 'app-calendar' is not a known element (not part of the module)</p>
  
  <p>What am I missing?</p>