How to declare a pipe globally to use in different modules?

you can use Sharing Modules for share your service, directive, pipes, components

you have to create an module and import the pipes ,directive, services or components and set the declaration, export and providers for the services.

import the sharing module in to where ever you want and use it.

basically pipes and directives declared and exported in NgModules meta data. for services define forRoot which returns the providers to access other modules.

  • shareModule.ts

    
    import { NgModule, ModuleWithProviders } from '@angular/core';
    import { appDirective } from './{your-path}';
    import { appPipe } from './{your-path}';
    import { appService } from './{your-path}';
    
    @NgModule({
      declarations: [
        appPipe,
        appDirective
      ],
      exports: [
        appPipe,
        appDirective
      ]
    })
    export class SharingModule {
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: SharingModule,
          providers: [ appService ]
        };
      }
    }
    
  • my-module1.module.ts

    
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { myComponent } from './{your-path}';
    
    import { SharingModule } from './{your-path}';
    
    @NgModule({
      declarations: [
        myComponent
      ],
      imports: [
        BrowserModule,
        SharingModule.forRoot()  
      ],
    })
    export class AppModule {}
    

Like wise you can do in othe moduls also.


In Angular a good technique for sharing common directives, components, pipes, etc. is to use a so called shared module.

Those modules declare and export common parts, to make them usable for any of your other modules.

The fundamentals section of the angular documentation is a very good read about shared modules.

Let's take as example your currConvert pipe.

  • Declare new NgModule called ApplicationPipesModule

  • Add the pipe to the declarations and exports arrays of the NgModule-decorator metadata

  • Add any modules that may be required for your pipe to work to the imports array

    // application-pipes.module.ts
    // other imports
    import { CurrConvertPipe } from './{your-path}';
    
    @NgModule({
      imports: [
        // dep modules
      ],
      declarations: [ 
        CurrConvertPipe
      ],
      exports: [
        CurrConvertPipe
      ]
    })
    export class ApplicationPipesModule {}
    
  • import the created ApplicationPipesModule module into the modules where your pipe is going to be used, by adding it to the imports array

    // my-module1.module.ts
    // other imports
    import { ApplicationPipesModule } from './{your-path}';   
    
    @NgModule({
     imports: [
       // other dep modules
       ApplicationPipesModule
     ],
     declarations: [],
     exports: []
    })
    export class MyModule1 {}