角度2のエラー：処理されていない約束の拒否：テンプレートの解析エラー：複数のコンポーネント：

Question

古いベータ版を使用してAngular2アプリケーションを数ヶ月前に開発しました。>私は現在、バージョン）を使用しています。

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

Iアプリ-コンポーネントのサブコンポーネントとして含まれる副成分製品成分を有する：それは、私は、次のエラーを取得するまででした。私はapp.module.tsファイルにこれらの両方を含めます。

このエラーが何を意味するのかわかりませんが、これはまだオンラインのためにサポートされていません。ここでは、関連するファイルがされています。問題は

app.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.component.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(); 
    } 
} 

product.component.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; 
    } 
} 

ありませんでしたこの前に私はなぜこのエラーが発生しているのかについて悩まされています。誰かが私を正しい方向に向けることができますか？彼らは適用されません両方、またはあなただけdeclarationsは、それが実際に適用されるべきで登録持っているので、いくつかのモジュールにアプリケーションを分割するので、あなたはOverlayComponentは、より具体的な、ProductComponentのセレクタを作成する必要があるのいずれか

おかげ

Answer 1

現在のモジュールのテンプレートに追加します。

モジュールが1つのみの場合は、すべてのコンポーネント、ディレクティブ、およびパイプがすべてdirectivesに適用されます。

Answer 2

私はこの問題を抱えていましたが、私の問題はtemplateURLがHTMLファイルのファイル名と一致していないことでした。

Answer 3

私はこれと同じ問題があったが、私の問題は、HTMLテンプレートの間違った参照

例だった：あなたの質問は、問題を投げるのを助けた

@Component({ 
    selector: 'myComponent-form', 

    templateUrl: './component/form/index.html', 
    // this doesn't work cause not found the html. I receive template parse error 

    templateUrl: 'index.html', 
    //this work for me cause I have index.html in the same folder 

})