数か月前に古いベータ版を使用して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;
}
}
以前は問題はありませんでしたが、なぜこのエラーが発生するのか困惑しています。誰かが私を正しい方向に向けることができますか?
ありがとう
ProductComponent
、OverlayComponent
のセレクターをより具体的にして両方が適用されないようにするか、アプリケーションを複数のモジュールに分割してdeclarations
のみを使用する必要があります。現在のモジュールのテンプレートに実際に適用する必要がある登録済み。
モジュールが1つしかない場合は、すべてのdirectives
のすべてのコンポーネント、ディレクティブ、およびパイプがすべてのコンポーネントに適用されます。
私はこれと同じ問題を抱えていましたが、私の問題は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
})
この問題が発生しました。問題は、templateURLがHTMLファイルのファイル名と一致しなかったことです。