Hice una tubería personalizada y quiero usarla en mi proyecto, pero aparece este error al implementar esa tubería: "src/app/portfolio/port-main/port-main.component.html:11:124 - error NG8004: No tubería encontrada con el nombre 'filtro'".
Mi código filter.pipe.ts:
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filter' })Aquí está el fragmento de código donde quiero usar esta tubería: Quiero mencionar que este componente está dentro de un módulo de enrutamiento que tiene implementada la carga diferida. Es por eso que no importé este componente en el archivo app.module.ts.
<div class="card mb-3 me-3 col-lg-6 col-md-12 col-sm-12" *ngFor="let img of PortfolioArray | filter:ValueText:'category'"> ... </div>Aquí está mi archivo app.module.ts donde importo la canalización personalizada:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { NavbarComponent } from './navbar/navbar.component'; import { NotFoundComponent } from './not-found/not-found.component'; import { SidebarComponent } from './sidebar/sidebar.component'; import { SidebarDownComponent } from './sidebar/sidebar-down/sidebar-down.component'; import { FilterPipe } from './pipes/filter.pipe'; @NgModule({ declarations: [ AppComponent, HomeComponent, NavbarComponent, NotFoundComponent, SidebarComponent, SidebarDownComponent, FilterPipe ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Si alguien sabe cómo resolver este problema, por favor hágamelo saber. Dispuesto a compartir más código si es necesario.
Editado Aquí está el módulo donde estoy usando la tubería:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { PortfolioRoutingModule } from './portfolio-routing.module'; import { PortMainComponent } from './port-main/port-main.component'; import { FilterPipe } from '../pipes/filter.pipe'; @NgModule({ declarations: [ PortMainComponent ], imports: [ CommonModule, PortfolioRoutingModule ], exports: [FilterPipe] }) export class PortfolioModule { }Según su código publicado, puede solucionar su problema agregando FilterPipe a la matriz de declarations en su PortfolioModule y eliminándolo en AppModule .
El problema al que se enfrenta actualmente es que desea utilizar una canalización/componente/directiva en un módulo donde no están declarados. Tan pronto como desee usar uno de esos en varios módulos, debe crear otro módulo con el que pueda compartirlos, llamémoslo SharedModule .
Un módulo compartido en su caso se ve así:
// An helper array to reduce code const ELEMS = [FilterPipe]; @NgModule({ declarations: [ELEMS], imports: [CommonModule], exports: [ELEMS] }) export class SharedModule {} La matriz de exports es importante porque solo puede usar componentes/tuberías/directivas que están en esa matriz en otros módulos.