Angulaire 2 erreur: non Gérée Promesse de rejet: Modèle erreurs d'analyse: Plus d'un composant:

J'ai développé une Angular2 application à l'aide de l'ancienne version bêta il y a quelques mois> je suis actuellement en train de déplacer cet autre, a une nouvelle version de la plus récente (version RC5) jusqu'à présent avec pas de contretemps. Jusqu'à ce que je reçois l'erreur suivante:

zone.js:484 Unhandled Promise rejection: Template parse errors:
More than one component: ProductComponent,OverlayComponent ("'noscroll': hideBody}">

J'ai un sous-produit composant composant qui est inclus comme une sous-composante de l'app-composant. - Je inclure les deux dans l'application.le module.ts fle.

Je ne suis pas sûr de ce que cette erreur signifie et ne peuvent trouver un soutien pour cette encore en ligne. Voici les fichiers:

app.le module.ts

import './rxjs-extensions';

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { HttpModule }     from '@angular/http';

import { AppComponent }   from './app.component';
import { ProductComponent }   from './components/product.component';
import { OverlayComponent }   from './components/overlay-component';

import { ProductService }   from './services/product.service';
import { CategoryService }   from './services/category.service';
import { Breadcrumb} from "./directives/breadcrumb";
import { CategoryTree } from "./directives/category-tree";
import { Files } from "./directives/files";
import { Gallery } from "./directives/gallery";
import { OrderInformation } from "./directives/order-information";




@NgModule({
    imports:      [
        BrowserModule,
        HttpModule
    ],
    declarations: [
        AppComponent,
        ProductComponent,
        OverlayComponent,
        Breadcrumb,
        CategoryTree,
        Files,
        Gallery,
        OrderInformation
    ],
    providers: [
        ProductService,
        CategoryService
    ],
    bootstrap:    [ AppComponent ]

})
export class AppModule { }

app.composante.ts

import { Component } from '@angular/core';
import { Product } from "./classes/Product";
import { ProductService } from "./services/product.service";
import { Category } from "./classes/Category";
import { CategoryService } from "./services/category.service";
@Component({
selector: 'product-display',
templateUrl: './app/views/main-view.html'
})
export class AppComponent {
title = `St. David's Poultry Supplies`;
menuLoaded = false;
hideBody = false;
productsLoaded = false;
categories = [];
selectedCategory = null;
selectedProduct = Product;
breadcrumbCategories = [];
products = [];
APIError = [];
constructor(
private _productService: ProductService,
private _categoryService: CategoryService
) {
}
getProducts(categoryId = 0) {
var payload = {
order           : 'asc',
order_by        : 'title',
category_id     : categoryId,
resize          : true,
imgHeight       : 200,
imgWidth        : 200
};
this._productService.getProducts(payload)
.subscribe(
products => {this.products = products},
error    => {this.APIError = error},
()       => {this.productsLoaded = true}
);
}
getCategories() {
this.productsLoaded = false;
this._categoryService.getCategories({
order           : 'asc',
order_by        : 'name',
parent_id       : 0,
//sub_cats        : true,
//group_by_parent : true
})
.subscribe(
categories => {this.categories = categories},
error      => {this.APIError = error},
()         => {
this.menuLoaded = true,
this.productsLoaded = true
}
);
}
selectCategory(category: Category) {
this.selectedCategory = category;
this.breadcrumbCategories.push(category);
}
resetFilters() {
this.getProducts();
this.getCategories();
this.selectedCategory = null;
this.selectedProduct = null;
}
private changeCategory(category: Category):void {
this.productsLoaded = false;
this.selectCategory(category);
this.getProducts(category.id);
}
ngOnInit() {
this.getCategories();
this.getProducts();
}
}

produit.composante.ts

import { Component, Input } from '@angular/core';
import { Product } from "../classes/Product";
import { Category } from "../classes/Category";
import { ProductService } from "../services/product.service";
@Component({
selector: 'product-view',
templateUrl: './app/views/product-view.html'
})
export class ProductComponent {
@Input() products: Product[];
@Input() selectedCategory: Category;
selectedProduct: Product;
contentLoaded = false;
title = "product viewer";
APIError = [];
constructor(
private _productService: ProductService
) {
_productService.emitter.subscribe(
product  => {
this.selectedProduct = product;
this.contentLoaded = true
}
);
}
selectProduct(product) {
this.selectedProduct = product;
this._productService.emitProduct(this.selectedProduct);
}
ngAfterContentInit() {
this.contentLoaded = true;
}
private changeSelectedProduct(product, callback) {
this.selectedProduct = product;
}
}

Il n'y a pas de problème avec ça avant, et je suis perplexe quant à pourquoi cette erreur se produit. Quelqu'un peut me pointer dans la bonne direction?

Grâce

OriginalL'auteur Jim | 2016-08-31