Angular 12 and custom pipes.... how to?

Question

Short form:

I get an error The pipe 'getListItemText' could not be found

Long form:

I have a need to use a pipe to transform a series of data objects (a mildly complex json object) to an html string

This seems ideal for an angular pipe!

This pipe is very specific to this data, so everything is contained within the component directory:

The pipe (get-list-item-text.pipe.ts):

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

@Pipe({
  name: 'getListItemText'
})
export class GetListItemTextPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.trim().split(/\s+/).length;
  }

}

(I'll make it more complicated & do what I want once I have the basic thing working)

The component definition (descriptions.module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DescriptionsComponent } from './descriptions.component';
import { DescriptionResolver } from './description.resolver';
import { DescriptionService } from './description.service';
import { GetListItemTextPipe } from './get-list-item-text.pipe';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    DescriptionsComponent,
    GetListItemTextPipe,
  ],
  providers: [
    DescriptionResolver,
    DescriptionService,
  ]
})
export class DescriptionsModule { }

... and the fragment of html (descriptions.component.html) I'm working with:

          <li *ngFor="let section of notebook.description.sections" ><span \
                      [innerHTML]="section.prepend | getListItemText "></span></li>

If I run my tests (ng test --watch=false), I get an error The pipe 'getListItemText' could not be found:

Chrome Headless 96.0.4664.45 (Linux x86_64) DescriptionsComponent should init, call the DescriptionSelector service, and get a response FAILED
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
    error properties: Object({ code: '302' })
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
        at getPipeDef$1 (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25804:1)
        at ɵɵpipe (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25761:1)
        at DescriptionsComponent_section_21_li_7_Template (ng:///DescriptionsComponent.js:7:5)
        at executeTemplate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9579:1)
        at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9383:1)
        at TemplateRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23036:1)
        at ViewContainerRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23167:1)
        at node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:3340:1
        at DefaultIterableDiffer.forEachOperation (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21569:1)
        at NgForOf._applyChanges (node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:3335:1)
Chrome Headless 96.0.4664.45 (Linux x86_64): Executed 49 of 62 (1 FAILED) (skipped 4) (0 secs / 0.217 secs)
Chrome Headless 96.0.4664.45 (Linux x86_64) DescriptionsComponent should init, call the DescriptionSelector service, and get a response FAILED
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
    error properties: Object({ code: '302' })
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
        at getPipeDef$1 (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25804:1)
        at ɵɵpipe (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25761:1)
        at DescriptionsComponent_section_21_li_7_Template (ng:///DescriptionsComponent.js:7:5)
        at executeTemplate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9579:1)
        at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9383:1)
        at TemplateRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23036:1)
        at ViewContainerRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23167:1)
        at node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:3340:1
        at DefaultIterableDiffer.forEachOperation (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21569:1)

If I remove the pipe from the fragment of HTML, the tests pass fine.

Everything I've found implies this is a correct implementation, however it's obviously not.

What have I missed?

How do I specify, and then use, a custom pipe?

(just to note, I did try a top-level definition, and adding the pipe definition to the app.module.ts file.... same problem; and adding a constructor as suggected in Getting 'Could Not Be Found' Error re: Custom Pipe in Angular 2 App makes no difference)

Looks like you have a issue with testing, Is it working with `ng serve`? [This answer](https://stackoverflow.com/questions/41543374/angular-2-unit-test-custom-pipe-error-the-pipe-could-not-be-found) might help you — Sameer, Dec 09 '21 at 11:26

Ravi Ashara · Answer 1 · 2021-12-09T11:32:03.330

0

Check live example https://stackblitz.com/edit/angular-11-new-f5hoeu?file=src/app/app.component.html

Create pipes.module.ts file

import { NgModule } from "@angular/core";

@NgModule({
  declarations: [ // import all pipes here
    GetListItemTextPipe 
  ],
  imports: [],
  exports: [ // import all pipes here
    GetListItemTextPipe 
  ]
})
export class PipesModule { }

import PipesModule in app.module.ts file inside imports array

import PipesModule in descriptions.module.ts file inside imports array

edited Dec 09 '21 at 11:32

answered Dec 09 '21 at 11:20

Ravi Ashara

1,177
7
16

thanks for the reply, and for the live example. Two questions: 1) The path seems to be fixed: I can change the class name in `pipes.module.ts` (and the reference to it) - but as soon as I change the name of the `pipes` folder... everything breaks; and 2) I can't replicate locally - either just defining the import in just `app.module.ts` or also in my component's foo.module.ts file ... as you describe above. What you have _looks_ logical, and if it works, is wonderfully extensible – CodeGorilla Dec 09 '21 at 14:52

Angular 12 and custom pipes.... how to?

Short form:

Long form:

1 Answers1