title: The selector did not match any elements while using component in Router
body: <p>I am not used to Angular 2 routers that much. I have written a HomeComponent and it is working fine for me.
  Now when i am using it in router the it gets displayed in the  by the components name (not by selector). Thus my page output has Homecomponent by not using its selector that is defined in its decorator.</p>
  
  <p>Now i am getting a warning that selector "main-home" did not match any elements.</p>
  
  <p>Kindly suggest how can i remove this error. Shall i change my page component structure.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about-us', component: LoginComponent}
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;main&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'main-home',
    templateUrl: './home.compoment.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent {}
  </code></pre>
  
  <p><strong>Error/warning</strong></p>
  
  <pre><code>EXCEPTION: Error in :0:0 caused by: The selector "main-home" did not match any elements
  ErrorHandler.handleError
  ORIGINAL EXCEPTION: The selector "main-home" did not match any elements
  </code></pre>
  
  <p>/<strong>* Updated*</strong>/</p>
  
  <p>Now i tested the same with SystemJS setup and no error is coming up. This problem is only with webpack setup. Kindly suggest how can this error be removed/avoided.</p>
  
  <p>check this code on plnkr:
  <a href="https://plnkr.co/edit/MasUPOPbakYULpWIOX6w?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/MasUPOPbakYULpWIOX6w?p=preview</a></p>