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.

Answer 1

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

exports: [
    FilterPipe, 
    OrderByPipe,
    SortByDirective,
    PaginationComponent
]

Hope this help!