How to import pipe to 2 modules(AppModule and ChildModule)?

Question

I've got my main module - app.module.ts and it's child reports.module.ts.

I've got some components under reports module, and some under app module. I need to use my pipe in all of these components. However, when I import the pipe in App module, in reports I get error The pipe 'moment' could not be found. If I add the pipe import to reports module, I get error like duplicate declaration. What should I do? I'm new to angular, so can't find workaround.

reports.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReportsComponent} from './reports.component'
import { ReportsRoutingModule } from './reports-routing.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MdePopoverModule } from '@material-extended/mde';
import {FilesizePipe} from '../../pipes/filesize.pipe'
// import {MomentPipe} from '../../pipes/moment.pipe'
import {AppModule} from '../../app.module'

import { ReportComponent } from './report/report.component';
import { GeneralInfoComponent } from './report/general-info/general-info.component';
import { StaticAnalysisComponent } from './report/static-analysis/static-analysis.component';
@NgModule({
  declarations: [
    ReportsComponent,
    ReportComponent,
    GeneralInfoComponent,
    FilesizePipe,
    // MomentPipe,
    StaticAnalysisComponent

  ],
  imports: [
    CommonModule,
    NgSelectModule,
    MdePopoverModule,
    ReportsRoutingModule,
    ReactiveFormsModule,
    FormsModule,

  ]
})
export class ReportsModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import localeRu from '@angular/common/locales/ru-KZ';
import localeRuExtra from '@angular/common/locales/extra/ru-KZ';
import { HeaderComponent } from './layout/header/header.component';
import { LoginComponent } from './routes/auth/login/login.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { LoaderService } from './services';
import {LoaderInterceptor} from './interceptors/loader.service'
import 'hammerjs';
import { NgxsModule } from '@ngxs/store';

import { UploadComponent } from './routes/upload/upload.component';
import { LoaderComponent } from './layout/loader/loader.component';
import { ReportsComponent } from './routes/reports/reports.component';
import {ReportsModule} from './routes/reports/reports.module'
import {} from './routes/reports/reports.module'
import { AutofocusDirective } from './directives/autofocus.directive';
import { NotificationCenterComponent } from './layout/notification-center/notification-center.component';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';

import {ReportsTableState} from './store/reportsTable.state';
import { QueueComponent } from './routes/queue/queue.component';
import { QueueTableComponent } from './routes/queue/queue-table/queue-table.component';
import { FailedAnalysesComponent } from './routes/queue/failed-analyses/failed-analyses.component';
import { MomentPipe } from './pipes/moment.pipe';
// import { FilesizePipe } from './pipes/filesize.pipe';
registerLocaleData(localeRu, 'ru', localeRuExtra);

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginComponent,
    UploadComponent,
    LoaderComponent,
    // ReportsComponent,
    AutofocusDirective,
    NotificationCenterComponent,
    QueueComponent,
    QueueTableComponent,
    FailedAnalysesComponent,
    MomentPipe,
    // FilesizePipe,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,

    NgxsLoggerPluginModule.forRoot(),
    NgxsModule.forRoot([
      ReportsTableState
    ], {developmentMode:true})
  ],
  providers: [
    LoaderService,
    { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

You should have 3 modules, your pipe being in the third one.

@NgModule({
  declaration: [MomentPipe],
  exports: [MomentPipe],
})
export class PipesModule {}

By exporting the pipes in the third modules, you make them available wherever you import that thrid module.

Answer 2

Add the pipe to separate module, then import this module to AppModule and ReportsModule.