Угловая ошибка 2: необработанное Отклонение обещания: ошибки разбора шаблона: более одного компонента:

Question

Я разработал приложение Angular2, используя старую бета-версию, несколько месяцев назад> В настоящее время я перехожу к другой новой версии (RC5 версия) до сих пор без зацепов. Это было, пока я не получаю следующее сообщение об ошибке:

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

У меня есть суб-компонент продукта-компонент, который включен в качестве суб-компоненты приложения-компоненты. Я включаю оба из них в app.module.ts fle.

Я не уверен, что означает эта ошибка и не может найти поддержки для этого, но в Интернете. Вот соответствующие файлы:

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; 
    } 
} 

Там не было никаких проблем с этим прежде, и я в тупике, почему эта ошибка происходит. Может кто-то указать мне верное направление?

Благодаря

Answer 1

вам необходимо либо сделать селекторы из ProductComponent, OverlayComponent конкретнее, чтобы они оба не применяются, или разбить приложение на несколько модулей, так что у вас есть только declarations прописано, что на самом деле должны быть применены к шаблонам в текущем модуле.

Если у вас есть только один модуль, все компоненты, директивы и трубы всех 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 

})