web-dev-qa-db-ja.com

Angular 2エラー：未処理のPromise拒否：テンプレート解析エラー：複数のコンポーネント：

数か月前に古いベータ版を使用してAngular2アプリケーションを開発しました>現在、これを問題なく最新（RC5バージョン）の新しいビルドに移行しています。それは私が次のエラーを受け取るまででした：

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

App-componentのサブコンポーネントとして含まれているサブコンポーネントproduct-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;
    }
}

以前は問題はありませんでしたが、なぜこのエラーが発生するのか困惑しています。誰かが私を正しい方向に向けることができますか？

ありがとう

angulartypescriptcomponents
5
Jim

ProductComponent、OverlayComponentのセレクターをより具体的にして両方が適用されないようにするか、アプリケーションを複数のモジュールに分割してdeclarationsのみを使用する必要があります。現在のモジュールのテンプレートに実際に適用する必要がある登録済み。

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

7
Günter Zöchbauer

私はこれと同じ問題を抱えていましたが、私の問題は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

})
0
Edu Martin

この問題が発生しました。問題は、templateURLがHTMLファイルのファイル名と一致しなかったことです。

0
Darryl Wagoner