Angular 2 错误：未处理的承诺拒绝：模板解析错误：多个组件：

Posted 2023-02-23

【中文标题】Angular 2 错误：未处理的承诺拒绝：模板解析错误：多个组件：

【英文标题】：Angular 2 error: Unhandled Promise rejection: Template parse errors: More than one component:

【发布时间】：2017-01-07 18:46:05

【问题描述】：

几个月前我使用旧的 beta 开发了一个 Angular2 应用程序> 我目前正在将此另一个应用程序迁移到最新（RC5 版本）的新版本，到目前为止没有任何问题。直到我收到以下错误：

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

我有一个子组件 product-component，它作为 app-component 的子组件包含在内。我将这两个都包含在 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;
    

以前没有问题，我很难理解为什么会发生这个错误。谁能指出我正确的方向？

谢谢

【参考方案1】：

您要么需要使ProductComponent、OverlayComponent 的选择器更具体，这样它们就不会同时适用，或者将您的应用程序拆分为几个模块，这样您就只需要注册应该实际应用的declarations到当前模块中的模板。

如果你只有一个模块，那么所有directives的所有组件、指令和管道都会应用于所有组件。

【讨论】：

您的问题有助于引发问题。我不小心给了两个组件相同的选择器名称！ Overlay 组件应该有一个“product-overlay”选择器。谢谢！

很高兴听到我能帮上忙 :)

@devoncrazylegs 我有同样的问题，但我无法解决。我在日志中有同样的错误，但我在选择器中给出了两个不同的名称来处理两个不同的组件，我该怎么办？将我的应用程序拆分为多个模块？

【参考方案2】：

我遇到了这个问题，我的问题是 templateURL 与 HTML 文件的文件名不匹配。

【参考方案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

)