title: Angular <custom-component> doesnt work on lazy-loaded modules
body: <p>I have created a custom component  which works fine on app.component, but when the <code>&lt;custom-component&gt;</code> is used in lazy loaded module it gives an error: </p>
  
  <pre><code>Error: Template parse errors:
  'my-component' is not a known element:
  1. If 'my-component' is an Angular component, then verify that it is part of this module.
  2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  </code></pre>
  
  <p>I'm using Angular 4.0.0 / CLI</p>
  
  <p>Code:</p>
  
  <p>app.module.ts</p>
  
  <p>...</p>
  
  <pre><code>import { LoaderComponent } from './shared/components/list-components/loader/loader.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      LoaderComponent &lt;- declared here because I need the component in multiple modules
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>loader.component.ts</p>
  
  <pre><code>import { Component, OnInit, Input, Output } from '@angular/core';
  
  @Component({
    selector: 'my-component',
    templateUrl: './loader.component.html',
    styleUrls: ['./loader.component.css']
  })
  export class LoaderComponent implements OnInit {
    @Input() type:any;
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
  
    { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' },
  
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;my-component&gt;&lt;/my-component&gt; &lt;-- works here
  </code></pre>
  
  <p>and lazy.component.html </p>
  
  <pre><code>&lt;p&gt;
    this module is lazy loaded
    &lt;my-component &gt;&lt;/my-component&gt; &lt;- not working
  &lt;/p&gt;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p><strong>* UPDATE *</strong></p>
  
  <p>I created a SharedModule which declares LoaderComponent. The SharedModule is imported in every module which needs the LoaderComponent. Works!</p>