没有找到名为“...”的 Pipe - Angular(2+)

Question

I made a custom pipe and want to use it in my project, but getting this error while implementing that pipe: "src/app/portfolio/port-main/port-main.component.html:11:124 - error NG8004: No pipe found with name 'filter'."

My filter.pipe.ts code:

   import { Pipe, PipeTransform } from '@angular/core';

   @Pipe({
     name: 'filter'
   })

Here is the code snippet where i wanna use this pipe: Want to mention that this component is inside a routing module which has lazy loading implemented. That's why I didn't import this component into app.module.ts file.

 <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>

Here is my app.module.ts file where I import the custom pipe:

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 { }

If anyone knows how to resolve this issue please let me know. Willing to share more code if needed.

Edited Here is the module where I'm using the pipe:

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 { }

Answer 1

Based on your posted code, you could fix your issue by adding the FilterPipe to the declarations array in your PortfolioModule and removing it in AppModule .

The issue you're currently facing is that you want to use a pipe/component/directive in a module where they're not declared. As soon as you want to use one of those in multiple modules you need to create another module with which you can share these, let's call it SharedModule .

A shared module in your case looks like this:

// An helper array to reduce code
const ELEMS = [FilterPipe];

@NgModule({
    declarations: [ELEMS],
    imports: [CommonModule],
    exports: [ELEMS]
})
export class SharedModule {}

The exports array is important because you can only use components/pipes/directives which are in that array in other modules.