Angular 6 library pipe

Question

How to add a custom pipe in an Angular 6 library in order for it to be available in my main app ? Currently I'm doing this in: lib.module.ts:

@NgModule({
  declarations: [
    SomePipe
  ],
  exports: [
   SomePipe
]})

in public_api.ts:

export * from './lib/pipes/some.pipe';

in app.module.ts:

import { LibModule } from 'lib';
@NgModule({
  ...
  imports: [
    LibModule
  ]
 ...
})

I'm trying to use the pipe {{ 'something' | some}} but transform method of SomePipe is not called.

SiddAjmera · Answer 1 · 2018-11-20T15:53:53.780

4

So the issue appears to be here:

export * from './lib/pipes/some.pipe';

You are exporting everything from some.pipe file when you should have exported the module(@NgModule) from the module file. Something like this:

export * from './lib.module';

Doing that should fix the issue.

Here's a Sample StackBlitz for your ref.

edited Nov 20 '18 at 15:53

answered Nov 20 '18 at 15:40

SiddAjmera

38,129
5
72
110

The export export * from './lib/pipes/some.pipe'; is correct because my pipe implementation resides in some.pipe.ts file. – purplebuttercup Nov 21 '18 at 16:03

score 0 · Accepted Answer · answered Nov 21 '18 at 16:07

The custom pipe was added correctly, and was working in my application. There was another bug that I did not manage to see, regarding a service (imported incorrectly from the library) that my @Pipe was using inside the transform() method. Therefore, transform() always appeared to return nothing, because it was relying on that service.

score 0 · Answer 3 · answered Feb 01 '22 at 20:49

you need go to module and import the pipe from this form:

import { SePipeModule } from 'se-component';

At this case, the "se-component" is the name of your "library" angular that you host the pipe, and the "SePipeModule" is the pipe module. Is very important that you export the name of pipe in "public-api.ts":

export {SeTestPipe} from './lib/se-pipe/se-test-pipe';

Angular 6 library pipe

3 Answers3