J'ai essayé toutes les suggestions que j'ai vues là-bas, mais je rencontre toujours les redoutées: Erreurs d'analyse de modèle: Le tube 'orderFilter' est introuvable
Dans mon SharedModule. ts (qui importe MyComponent) J'ai:
{{item | orderFilter}}
Le code du tube (quelque chose de simple pour l'instant):
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'orderFilter'})
export class OrderFilterPipe implements PipeTransform {
transform(item: any): any {
return item.data;
}
}
Dans MyComponent.html J'ai:
import { OrderFilterPipe } from '../pipes/order-filter.pipe';
@NgModule({
...
declarations: [OrderFilterPipe];
...
Je suis un peu perdu ... sauf si je manque quelque chose dans l'implémentation spécifique à Angular 5. Des idées?
3 Réponses :
J'obtiens la même erreur lorsque je supprime le tube des «déclarations» de l'app.module dans cette reproduction minimale: https://stackblitz.com/edit/angular-wfi7v9
Quand je le rajoute, alto! Tout fonctionne. Cela me porte à croire que l'erreur se trouve dans le module qui consomme votre module de canalisation. Vous êtes-vous souvenu d'importer votre module pipe dans le module dans lequel réside MyComponent?
Oui, je le vois fonctionner dans votre exemple. Si étrange pourquoi ce n'est pas à l'esprit ... quelque chose que je dois oublier. Oui, le tube est importé dans le SharedModule, dans lequel MyComponent vit
Il n'y a pas non plus d'erreur tslint dans mon modèle ... c'est juste pour une raison quelconque au moment de l'exécution, il ne peut pas le trouver et génère cette erreur
Essayez un autre nom pour votre pipe, vous ne pouvez pas nommer votre pipe "filtre".
Je viens d'utiliser un mauvais exemple tiré de mon code - juste mis à jour en 'orderFilter' pour supprimer toute confusion
Lorsque nous ajoutons un composant ou une directive dans un fichier de module partagé, donc avec l'ajout de ce module à l'intérieur de la déclaration, nous devons également l'ajouter au tableau des exportations. Veuillez consulter le code ci-dessous:
import { OrderFilterPipe } from '../pipes/order-filter.pipe';
@NgModule({
declarations: [OrderFilterPipe],
exports: [OrderFilterPipe] // you need to add this line
})
Le message d'erreur mentionne
myPipe. Peut-être avez-vous cette faute de frappe quelque part dans votre balisage.Pourquoi l'ajoutez-vous à la fois comme déclaration et comme fournisseur? Retirez-le des fournisseurs. De plus, ce que vous essayez est directement déconseillé dans la documentation angulaire , filtrez simplement dans le composant, utilisez des méthodes de tableau ou RxJS.
@ConnorsFan désolé, juste une faute de frappe dans mon exemple - j'ai changé les noms pour protéger les innocents;)
votre propriété de déclarations a maintenant une faute de frappe.
Lorsque vous dites que SharedModule importe le composant, que voulez-vous dire? Ajoutez-vous le composant à la propriété «importations» dans le module? Vous ne pouvez importer que d'autres modules.
@KeenanDiggs corrigé, merci
@KeenanDiggs omg .. J'ai trouvé la cause principale .. mon application n'importait pas réellement SharedModule .. elle importait MyComponent à partir d'un module différent .. c'est pourquoi elle n'a pas pu trouver le filtre. Ugh .. merci, Keenan vous avez aidé à localiser l'erreur dans mon code!
@brainmonter excellent! bonne année