title: Angular 2 error: Unhandled Promise rejection: Template parse errors: More than one component:
body: <p>I developed a an Angular2 application using the old beta a few months back> I am currently moving this other to a fresh build of the newest (RC5 version) so far with no hitches. That was until I have been getting the following error:</p>
  
  <pre><code>zone.js:484 Unhandled Promise rejection: Template parse errors:
  More than one component: ProductComponent,OverlayComponent ("'noscroll': hideBody}"&gt;
  </code></pre>
  
  <p>I have a sub-component product-component which is included as a sub-component of app-component. I include both of these in the app.module.ts fle.</p>
  
  <p>I am not sure what this error means and can find no support for this yet online. Here are the relevant files:</p>
  
  <p>app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>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 =&gt; {this.products = products},
                  error    =&gt; {this.APIError = error},
                  ()       =&gt; {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 =&gt; {this.categories = categories},
                  error      =&gt; {this.APIError = error},
                  ()         =&gt; {
                      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();
      }
  }
  </code></pre>
  
  <p>product.component.ts</p>
  
  <pre><code>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  =&gt; {
                  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;
      }
  }
  </code></pre>
  
  <p>There was no problem with this before and I am stumped as to why this error is occurring. Can anyone point me in the right direction?</p>
  
  <p>Thanks</p>