title: Component template content appearing twice in angular2
body: <p>While my page is loading the component content is displaying twice.I tried with another component too, but i can't get the actual output.</p>
  
  <p>Here is my app.module.ts</p>
  
  <pre><code>    import { NgModule }      from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { Routes, RouterModule } from '@angular/router';
  
      import { AppComponent }  from './app.component';
  
      var routes : Routes = [
          {
              path: 'home',
              component: AppComponent
          },  
          { 
              path: '',
              pathMatch: 'full',
              redirectTo: 'home'
  
           },
  
      ]
  
      @NgModule({
        imports:      [ BrowserModule, RouterModule.forRoot(routes) ],
        declarations: [ AppComponent, AppComponent ],
        bootstrap:    [ AppComponent ]
      })
      export class AppModule { }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>    import { Component } from '@angular/core';
  
      @Component({
        selector: 'my-app',
        template: `&lt;h1&gt;Hello {{name}}&lt;/h1&gt;&lt;router-outlet&gt;&lt;/router-outlet&gt;`,
      })
      export class AppComponent  { name = 'Angular'; }
  </code></pre>