Angulaire 2 erreur: non Gérée Promesse de rejet: Modèle erreurs d'analyse: Plus d'un composant:
J'ai développé une Angular2 application à l'aide de l'ancienne version bêta il y a quelques mois> je suis actuellement en train de déplacer cet autre, a une nouvelle version de la plus récente (version RC5) jusqu'à présent avec pas de contretemps. Jusqu'à ce que je reçois l'erreur suivante:
zone.js:484 Unhandled Promise rejection: Template parse errors:
More than one component: ProductComponent,OverlayComponent ("'noscroll': hideBody}">
J'ai un sous-produit composant composant qui est inclus comme une sous-composante de l'app-composant. - Je inclure les deux dans l'application.le module.ts fle.
Je ne suis pas sûr de ce que cette erreur signifie et ne peuvent trouver un soutien pour cette encore en ligne. Voici les fichiers:
app.le 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.composante.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();
}
}
produit.composante.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;
}
}
Il n'y a pas de problème avec ça avant, et je suis perplexe quant à pourquoi cette erreur se produit. Quelqu'un peut me pointer dans la bonne direction?
Grâce
OriginalL'auteur Jim | 2016-08-31
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin de faire les sélecteurs de
ProductComponent
,OverlayComponent
plus spécifiques, afin qu'ils ne pas appliquer, ou de diviser votre application en plusieurs modules si vous avez seulement ledeclarations
enregistré qui doit être appliqué pour les modèles dans le module en cours.Si vous avez seulement un module, puis tous les composants, les directives et les tuyaux de toutes
directives
sont appliqués à tous les composants.Heureux d'entendre que je pourrais aider 🙂
je vous en êtes même problème, mais je ne suis pas en mesure de le résoudre. J'ai le même message d'erreur dans le journal, mais j'ai donner deux noms différents pour désigner le sélecteur de thw deux composantes différentes, que dois-je faire? split de mon application en plusieurs modules?
OriginalL'auteur Günter Zöchbauer
J'ai eu ce problème et que mon problème était le templateURL ne correspond pas au nom de fichier pour le fichier HTML.
OriginalL'auteur Darryl Wagoner
J'ai eu ce même problème mais mon problème était dû à un mauvais renvoi de modèle html
Exemple:
OriginalL'auteur Edu Martin