如何将管道导入两个模块(AppModule和ChildModule)？

Question

我有我的主模块- app.module.ts，它是子模块reports.module.ts。

我在reports模块下有一些组件，在app模块下也有一些组件。我需要在所有这些组件中使用我的管道。然而，当我在应用程序模块中导入管道时，在报告中我得到了error The pipe 'moment' could not be found。如果我将管道导入添加到报告模块中，我会得到类似重复声明的错误。我该怎么办？我刚接触angular，所以找不到解决办法。

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

你应该有3个模块，你的管道在第三个模块中。

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

通过导出第三个模块中的管道，您可以在导入该thrid模块的任何地方使用这些管道。

Answer 2

将管道添加到单独的模块，然后将此模块导入到AppModule和ReportsModule中。