CODEWITHSUNDEEP
angularangular-pipeangular-moduleangular-library
Pennywise83
Pennywise83

Reputation: 1784

Exposing a Pipe from an external module in Angular 8

I'm working on abstracting some utility libraries that we use in our projects. I've created a new Angular library which exposes some models, services and pipes.

I need to be able to use a pipe either in a template and inside a component.

This is my library structure:

Shared Module

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

ByesPipe 

   @Pipe({
          name: 'bytes'
        })
        export class BytesPipe implements PipeTransform {         
          transform(input: any): any {
...

         }
        }

Builded the library, I do the import in my application: App.module

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

Everithing works fine if I use BytesPipe in a template. When I try to use the Pipe inside a component I receive this compilation error:

Module not found: Error: Can't resolve 'shared/lib/pipe/bytes.pipe'

The only way to get the things work is do this import instead of 'shared/lib/pipe/bytes.pipe':

import {ɵe as BytesPipe} from 'shared'

The content of 'shared.d.ts' is:

export * from './public-api';
export { BytesPipe as ɵe } from './lib/pipe/bytes.pipe';

I know that this way to import is wrong, since I'm referring to the compiled name that could change withing different builds.

What I'm doing wrong?

Upvotes: 1

Views: 2461

Answers (1)

Pennywise83
Pennywise83

Reputation: 1784

The answer was so simple: I needed to export the pipe explicitly on public_api:

export { BytesPipe } from './lib/pipe/bytes.pipe'

Upvotes: 1

Related Questions