Lỗi góc 2: Bỏ lỗi lời hứa: Lỗi phân tích mẫu: Nhiều hơn một thành phần:

Question

Tôi đã phát triển một ứng dụng Angular2 sử dụng bản beta cũ vài tháng trước> Tôi hiện đang di chuyển phần mềm này sang bản dựng mới nhất (RC5) phiên bản) cho đến nay với không có trở ngại. Đó là cho đến khi tôi nhận được lỗi sau:

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

Tôi có thành phần sản phẩm phụ được bao gồm dưới dạng thành phần phụ của thành phần ứng dụng. Tôi bao gồm cả hai trong số này trong app.module.ts fle.

Tôi không chắc chắn lỗi này có nghĩa là gì và không thể tìm thấy hỗ trợ cho điều này nhưng trực tuyến. Dưới đây là các tập tin liên quan:

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

Không có vấn đề với điều này trước và tôi stumped là tại sao lỗi này xảy ra. ai đó có thể chỉ cho tôi phương hướng đúng không?

Cảm ơn

Answer 1

Bạn có thể cần phải thực hiện các selectors của ProductComponent, OverlayComponent cụ thể hơn để họ làm không được cả hai áp dụng, hoặc để phân chia ứng dụng của bạn thành nhiều module vì vậy bạn chỉ có declarations đăng ký mà thực sự nên được áp dụng vào các mẫu trong mô-đun hiện tại.

Nếu bạn chỉ có một mô-đun, thì tất cả các thành phần, chỉ thị và đường ống của tất cả directives đều được áp dụng cho tất cả các thành phần.

Answer 2

Tôi gặp sự cố này và sự cố của tôi là templateURL không khớp với tên tệp cho tệp HTML.

Answer 3

Tôi có vấn đề này tương tự nhưng vấn đề của tôi là một tài liệu tham khảo sai của mẫu html

Ví dụ:

@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 

})