Angular: ng build --prod "Cannot determine the module for class. Add class to the NgModule to fix it"

Question

I have placed my pagination logic in a separate module and importing it in AppModule. Below is my code for my pagination module and AppModule.

PagingUtilitiesModule:

import { NgModule, ModuleWithProviders, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderByPipe } from './order-by.pipe';
import { FilterPipe } from './filter.pipe';
import { SortByDirective } from './sort-by.directive';
import { PaginationComponent } from './pagination/pagination.component';
import { ServiceLocator } from './service-locator';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SortByDirective,
    PaginationComponent
  ],
  exports: [
    SortByDirective,
    PaginationComponent
  ]
})
export class PagingUtilitiesModule {
  constructor(private injector: Injector) {
    ServiceLocator.injector = this.injector;
  }

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: PagingUtilitiesModule,
      providers: [
        FilterPipe,
        OrderByPipe
      ]
    }
  }
}

AppModule:

import { NgModule } from '@angular/core';
import { Location } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { MultiselectDropdownModule } from 'angular-2-dropdown-multiselect';
import { FileUploadModule } from 'ng2-file-upload';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

import { AppRoutingModule } from './app-routing/app-routing.module';
import { PagingUtilitiesModule } from './shared/paging-utilities/paging-utilities.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AgreementComponent } from './agreement/agreement.component';
import { DatepickerDirective } from './shared/datepicker.directive';
import { HeaderComponent } from './header/header.component';
import { CreatePriceListComponent } from './create-price-list/create-price-list.component';
import { ExcelReaderService } from './shared/excel-reader.service';

import { AgreementDetailsService } from './agreement/agreement-details.service';
import { LoaderInterceptorService } from './shared/loader-interceptor.service';
import { ContractComponent } from './contract/contract.component';
import { EditableControlComponent } from './shared/editable-control/editable-control.component';
import { SearchService } from './home/search.service';
import { FilesComponent } from './agreement/files/files.component';
import { SearchComponent } from './home/search/search.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        MultiselectDropdownModule,
        FileUploadModule,
        SlimLoadingBarModule.forRoot(),
        AppRoutingModule,
        PagingUtilitiesModule.forRoot()
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        AgreementComponent,
        DatepickerDirective,
        HeaderComponent,
        CreatePriceListComponent,
        ContractComponent,
        EditableControlComponent,
        FilesComponent,
        SearchComponent
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: LoaderInterceptorService,
            multi: true
        },
        ExcelReaderService,
        AgreementDetailsService,
        SearchService,
        Location
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

As you can see, OrderByPipe and FilterPipe are pipes and I'm providing them in my PagingUtilitiesModule and I'm importing my PagingUtilitiesModule.forRoot() into AppModule. It's working fine on normal build that happens on file changes. But when I do ng build --prod, it's showing this error

ERROR in Error: Cannot determine the module for class OrderByPipe in D:/Projects/AMSSFrontEnd/src/app/shared/paging-utilities/order-by.pipe.ts! Add OrderByPipe to the NgModule to fix it. Cannot determine the module for class FilterPipe in D:/Projects/AMSSFrontEnd/src/app/shared/paging-utilities/filter.pipe.ts! Add FilterPipe to the NgModule to fix it.

Please help me with this.

Personification

Answer 1

You can try to add FilterPipe and OrderByPipe pipes into export[] property as below:

exports: [
    FilterPipe, 
    OrderByPipe,
    SortByDirective,
    PaginationComponent
]

Hope this help!

Hoyden