conflito de components...

Eu aqui novamente... aind amais decepcionado com o angular 2...

eu criei um form.component.ts e seu respectivo template foto.component.html

estou usando a versão 4.0

tenho um pagina principal que tenho 3 links. segue o codigo:

home.component.html:

<div class="jumbotron">
  <h1 class="text-center" style="font-family: 'Bree Serif', serif;">BEM VINDO AO WEBTUC!</h1>
</div>
<div class="container">
  <div class="row">
    <br>
    <a [routerLink]="['/produtos']" class="btn btn-success">
      Gerenciador de Produtos
    </a>
    <br><br><br>
    <a [routerLink]="['/upload']" class="btn btn-success">
      Fazer upload
    </a>
    <br><br><br>
    <a [routerLink]="['/cadastro']" class="btn btn-info">
      Cadastrar produto
    </a>
  </div>
</div>

arquivo de rotas:

import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {UploadComponent} from './upload/upload.component';
import {ProductManagerComponent} from './productManager/product-manager.component';
import {FormComponent} from './form/form.component';


const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'upload', component: UploadComponent},
  {path: 'produtos', component: ProductManagerComponent},
  {path: 'cadastro', component: FormComponent},
  {path: '**', redirectTo: ''}
];

export const routing = RouterModule.forRoot(appRoutes);

quando eu acesso meu "cadastrar produto", paarece oq eu coloquei no seu respectivo template :

form.component.html:

<div>
  oi
</div>

agora eu vou clicar em "gerenciador de produtos e ao inves de ele carregar isso:

<div class="jumbotron">
  <h1 class="text-center" style="font-family: 'Bree Serif', serif;">GERENCIADOR DE PRODUTOS</h1>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form (submit)="findByCode($event)">
        <h2 class="text-center" style="font-family: 'Bree Serif', serif;">
          Buscar por código de barra:
        </h2><br>
        <div class="input-group">
        <span class="input-group-btn">
          <button  type="submit" class="btn btn-success">
              Procurar
            </button>
        </span>
          <input name="barcode" [(ngModel)]="barcode" type="search" class="form-control">
        </div>
        <br><br>
      </form>
      <form (submit)="findByDescription($event)">
        <h2 class="text-center" style="font-family: 'Bree Serif', serif;">
          Buscar por descricão:
        </h2>
        <br>
        <div class="input-group">
          <span class="input-group-btn">
            <button  type="submit" class="btn btn-info">
              Procurar
            </button>
          </span>
          <input type="search" name="description" [(ngModel)]="description" class="form-control">
        </div>
      </form>
      <br><br>
      <a [routerLink]="['']" class="btn btn-danger">Voltar</a>


    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-6 col-md-6" *ngFor="let product of products">
          <div class="thumbnail">
            <img
              src="{{product.codigoBarra}}.jpg"
              alt="banana">
            <div class="caption">
              <h3>Produto: {{product.descricao | uppercase}}</h3>
              <p>Código de Barra: {{product.codigoBarra}}</p>
              <p>Preço: R${{product.valor}}</p>
              <p><a href="#" class="btn btn-warning " role="button">Editar</a> <a href="#" class="btn btn-danger"
                                                                                  role="button">Cancelar</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-6" *ngIf="((productFindedByCode | json) != '{}')">
          <div class="thumbnail">
            <img
              src="http://mosh.hitthefloor.com/wp-content/uploads/sites/8/2016/09/slipknot_summer_tour.jpg"
              alt="banana">
            <div class="caption">
              <h3>Produto: {{productFindedByCode.descricao | uppercase}}</h3>
              <p>Código de Barra: {{productFindedByCode.codigoBarra}}</p>
              <p>Preço: R${{productFindedByCode.valor}}</p>
              <p><a href="#" class="btn btn-warning " role="button">Editar</a> <a href="#" class="btn btn-danger"
                                                                                  role="button">Cancelar</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ele carrega duas vezes o meu "oi" fica bem assim:

oi oi

olha como esta meu gerenciador de produtos:

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


@Component({
    moduleId: module.id,
    selector: 'search',
    templateUrl: './product-manager.component.html'
})

export class ProductManagerComponent{

    barcode = '';
    description = '';
    products: Array<Object> = [];
    productFindedByCode: Object = {};
    http: Http;

    constructor(http: Http){
        this.http = http;
    }

   findByCode(event: any): void {
       event.preventDefault();
       if(!(this.products == [])){
         this.products = [];
       }
       this.http.get("procurar/" + this.barcode)
       .map(res => res.json())
       .subscribe(data => this.productFindedByCode = data,
                  error => console.log(error));
   }

   findByDescription(event: any): void {
      event.preventDefault();
      if(!(this.productFindedByCode=={})){
        this.productFindedByCode= {};
      }
      this.http.get("procurar/descricao/" + this.description.toUpperCase())
        .map(res => res.json())
        .subscribe(data => {this.products = data; console.log(data)},
                   error => console.log(error));
   }
}

:(