Component is printed 2 times in browser

Well guys, I'm developing an app with angular2 final version using routes.

I created some files and then came across a route problem.

My component Home is printed 2 times in the browser.

IntheFirebugConsole:

Follow the code below:

login.ts

// app/login/login.ts

import { Component } from '@angular/core';

@Component({
  selector: 'login',
  templateUrl: 'app/login/login.html',
  styleUrls: ['app/login/login.css']
})

export class Login { }

home.html

<h1>Angular Router</h1>
<router-outlet></router-outlet>

home.ts

// app/home/home.ts

import { Component } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: 'app/home/home.html',
  styleUrls: ['app/home/home.css']
})

export class Home { }

app.routing.ts

// app/app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Login } from './login/login';
import { Home } from './home/home';

const appRoutes: Routes = [
    { 
        path: '', 
        component: Home, 
        pathMatch: 'full' 
    },
    { 
        path: 'logar', 
        component: Login
    }
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

//app/app.module.ts

import { NgModule }                      from '@angular/core';
import { BrowserModule }                 from '@angular/platform-browser';
import { routing, appRoutingProviders }  from './app.routing';
import { Login }                         from './login/login';
import { Home }                          from './home/home';
@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    Home,
    Login
  ],
  providers: [
    //appRoutingProviders
  ],
  bootstrap: [ Home ]
})
export class AppModule {
}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);