title: Cannot use a Component declared in a "CoreModule" but can use services
body: <p>I am trying to follow the angular docs so that I only have one instance of a specific module. Specifically the <a href="https://angular.io/guide/ngmodule#the-core-module" rel="nofollow noreferrer">CoreModule</a> and the <a href="https://angular.io/guide/ngmodule#shared-modules" rel="nofollow noreferrer">SharedModule</a> sections.</p>
  
  <p>The demo at the bottom of the links above works for only importing <code>CoreModule</code> once in the AppModule, where the lazy loaded <code>HeroesModule</code> and <code>HeroComponent</code> can reference the <code>UserService</code> declared in the <code>CoreModule</code></p>
  
  <p>My problem comes in when trying to use a Component that has been declared and exported from a "CoreModule". </p>
  
  <p>For example the default <code>HeroComponent</code> works like:</p>
  
  <pre><code>// Exact copy except import UserService from core
  import { Component }   from '@angular/core';
  
  import { HeroService } from './hero.service';
  import { UserService } from '../core/user.service';
  
  @Component({
    template: `
      &lt;h2&gt;Heroes of {{userName}}&lt;/h2&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    providers: [ HeroService ]
  })
  export class HeroComponent {
    userName = '';
    constructor(userService: UserService) {
      this.userName = userService.userName;
    }
  }
  </code></pre>
  
  <p>but if I modify it to include the <code>app-title</code> component declared in the <code>CoreModule</code> it breaks with the error <code>'app-title' is not a known element</code></p>
  
  <pre><code>// Exact copy except import UserService from core
  import { Component }   from '@angular/core';
  
  import { HeroService } from './hero.service';
  import { UserService } from '../core/user.service';
  
  @Component({
    template: `
      &lt;h2&gt;Heroes of {{userName}}&lt;/h2&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;app-title&gt;&lt;/app-title&gt;
    `,
    providers: [ HeroService ]
  })
  export class HeroComponent {
    userName = '';
    constructor(userService: UserService) {
      this.userName = userService.userName;
    }
  }
  </code></pre>
  
  <p>I have copied the example from the angular.io docs below, and have only modified the <code>app/hero/hero.component.ts</code> template to include <code>&lt;app-title&gt;&lt;/app-title&gt;</code>, </p>
  
  <p>Example: click the "Heroes"  button after the app loads</p>
  
  <p><a href="https://plnkr.co/edit/SZOEvdRCT23S4DfbGmut?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/SZOEvdRCT23S4DfbGmut?p=preview</a> </p>
  
  <p>edit: second example, click "Contact" after the app loads</p>
  
  <p><a href="https://stackblitz.com/edit/angular-2ym6ya?file=contact/contact.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-2ym6ya?file=contact/contact.component.html</a></p>
  
  <p>Any suggestions on getting the components from <code>CoreModule</code> to work in lazy loaded modules, or information on why I shouldn't expect this to work would be greatly appreciated.</p>