Angular Cli Prod Build : Cannot determine the module for class DataTableColumnHeaderDirective

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Simple getting started based on guide. Just added NgxDatatableModule in app.module.ts. No other include. Works fine on ng serve. Problem with ng build --prod

ERROR in Cannot determine the module for class DataTableColumnHeaderDirective in node_modules/@swimlane/ngx-datatable/src/components/columns/column-header.directive.ts! Add DataTableColumnHeaderDirective to the NgModule to fix it. Cannot determine the module for class DataTableColumnCellDirective in node_modules/@swimlane/ngx-datatable/src/components/columns/column-cell.directive.ts! Add DataTableColumnCellDirective to the NgModule to fix it. Cannot determine the module for class DataTableColumnDirective in node_modules/@swimlane/ngx-datatable/src/components/columns/column.directive.ts! Add DataTableColumnDirective to the NgModule to fix it. Cannot determine the module for class ScrollerComponent in node_modules/@swimlane/ngx-datatable/src/components/body/scroller.component.ts! Add ScrollerComponent to the NgModule to fix it. Cannot determine the module for class DataTableBodyComponent in node_modules/@swimlane/ngx-datatable/src/components/body/body.component.ts! Add DataTableBodyComponent to the NgModule to fix it. Cannot determine the module for class DataTableBodyCellComponent in node_modules/@swimlane/ngx-datatable/src/components/body/body-cell.component.ts! Add DataTableBodyCellComponent to the NgModule to fix it. Cannot determine the module for class DataTableBodyRowComponent in node_modules/@swimlane/ngx-datatable/src/components/body/body-row.component.ts! Add DataTableBodyRowComponent to the NgModule to fix it. Cannot determine the module for class ProgressBarComponent in node_modules/@swimlane/ngx-datatable/src/components/body/progress-bar.component.ts! Add ProgressBarComponent to the NgModule to fix it. Cannot determine the module for class DataTableRowWrapperComponent in node_modules/@swimlane/ngx-datatable/src/components/body/body-row-wrapper.component.ts! Add DataTableRowWrapperComponent to the NgModule to fix it. Cannot determine the module for class DataTableSelectionComponent in node_modules/@swimlane/ngx-datatable/src/components/body/selection.component.ts! Add DataTableSelectionComponent to the NgModule to fix it. Cannot determine the module for class DatatableRowDetailTemplateDirective in node_modules/@swimlane/ngx-datatable/src/components/row-detail/row-detail-template.directive.ts! Add DatatableRowDetailTemplateDirective to the NgModule to fix it. Cannot determine the module for class DatatableRowDetailDirective in node_modules/@swimlane/ngx-datatable/src/components/row-detail/row-detail.directive.ts! Add DatatableRowDetailDirective to the NgModule to fix it. Cannot determine the module for class DataTableFooterComponent in node_modules/@swimlane/ngx-datatable/src/components/footer/footer.component.ts! Add DataTableFooterComponent to the NgModule to fix it. Cannot determine the module for class DataTablePagerComponent in node_modules/@swimlane/ngx-datatable/src/components/footer/pager.component.ts! Add DataTablePagerComponent to the NgModule to fix it. Cannot determine the module for class DataTableFooterTemplateDirective in node_modules/@swimlane/ngx-datatable/src/components/footer/footer-template.directive.ts! Add DataTableFooterTemplateDirective to the NgModule to fix it. Cannot determine the module for class DatatableFooterDirective in node_modules/@swimlane/ngx-datatable/src/components/footer/footer.directive.ts! Add DatatableFooterDirective to the NgModule to fix it. Cannot determine the module for class DatatableComponent in node_modules/@swimlane/ngx-datatable/src/components/datatable.component.ts! Add DatatableComponent to the NgModule to fix it. ERROR in ./src/main.ts

Expected behavior

ng build --prod to make distribution without errors

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

npm 5.3.0, node 8.3.0 “dependencies”: { “@angular/animations”: “^4.3.5”, “@angular/cdk”: “^2.0.0-beta.8”, “@angular/common”: “^4.3.5”, “@angular/compiler”: “^4.3.5”, “@angular/core”: “^4.3.5”, “@angular/forms”: “^4.3.5”, “@angular/http”: “^4.3.5”, “@angular/material”: “^2.0.0-beta.8”, “@angular/platform-browser”: “^4.3.5”, “@angular/platform-browser-dynamic”: “^4.3.5”, “@angular/router”: “^4.3.5”, “@ng-bootstrap/ng-bootstrap”: “^1.0.0-alpha.30”, “@swimlane/ngx-datatable”: “^10.0.5”, “bootstrap”: “^4.0.0-alpha.6”, “compass-mixins”: “^0.12.10”, “core-js”: “^2.4.1”, “enhanced-resolve”: “^3.4.1”, “font-awesome”: “^4.7.0”, “jquery”: “^3.2.1”, “popper”: “^1.0.0”, “rxjs”: “^5.4.3”, “tether”: “^1.4.0”, “zone.js”: “^0.8.14” }, “devDependencies”: { “@angular/cli”: “^1.3.1”, “@angular/compiler-cli”: “^4.3.5”, “@angular/language-service”: “^4.3.5”, “@ngtools/webpack”: “^1.5.1”, “@types/jasmine”: “^2.5.54”, “@types/jasminewd2”: “~2.0.2”, “@types/node”: “^8.0.24”, “codelyzer”: “^3.1.2”, “jasmine-core”: “^2.7.0”, “jasmine-spec-reporter”: “^4.2.1”, “karma”: “~1.7.0”, “karma-chrome-launcher”: “^2.2.0”, “karma-cli”: “~1.0.1”, “karma-coverage-istanbul-reporter”: “^1.2.1”, “karma-jasmine”: “~1.1.0”, “karma-jasmine-html-reporter”: “^0.2.2”, “protractor”: “~5.1.2”, “ts-node”: “^3.3.0”, “tslint”: “^5.6.0”, “typescript”: “^2.4.2” }

• Table version: 0.8.x

“@swimlane/ngx-datatable”: “^10.0.5”,

• Angular version: 2.0.x

4.3.5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[arsyed04]

I was able to fix by removing all @swimlane/ngx-datatable imports, making my own module based on ngx-datatable and using that instead as shared dependency.

`import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; import ‘rxjs/add/observable/fromEvent’;

import { DataTableFooterTemplateDirective } from ‘@swimlane/ngx-datatable/src/components/footer/footer-template.directive’; import { VisibilityDirective } from ‘@swimlane/ngx-datatable/src/directives/visibility.directive’; import { DraggableDirective } from ‘@swimlane/ngx-datatable/src/directives/draggable.directive’; import { ResizeableDirective } from ‘@swimlane/ngx-datatable/src/directives/resizeable.directive’; import { OrderableDirective } from ‘@swimlane/ngx-datatable/src/directives/orderable.directive’; import { LongPressDirective } from ‘@swimlane/ngx-datatable/src/directives/long-press.directive’; import { ScrollerComponent } from ‘@swimlane/ngx-datatable/src/components/body/scroller.component’; import { DatatableComponent } from ‘@swimlane/ngx-datatable/src/components/datatable.component’; import { DataTableColumnDirective } from ‘@swimlane/ngx-datatable/src/components/columns/column.directive’; import { DataTableHeaderComponent } from ‘@swimlane/ngx-datatable/src/components/header/header.component’; import { DataTableHeaderCellComponent } from ‘@swimlane/ngx-datatable/src/components/header/header-cell.component’; import { DataTableBodyComponent } from ‘@swimlane/ngx-datatable/src/components/body/body.component’; import { DataTableFooterComponent } from ‘@swimlane/ngx-datatable/src/components/footer/footer.component’; import { DataTablePagerComponent } from ‘@swimlane/ngx-datatable/src/components/footer/pager.component’; import { ProgressBarComponent } from ‘@swimlane/ngx-datatable/src/components/body/progress-bar.component’; import { DataTableBodyRowComponent } from ‘@swimlane/ngx-datatable/src/components/body/body-row.component’; import { DataTableRowWrapperComponent } from ‘@swimlane/ngx-datatable/src/components/body/body-row-wrapper.component’; import { DatatableRowDetailDirective } from ‘@swimlane/ngx-datatable/src/components/row-detail/row-detail.directive’; import { DatatableGroupHeaderDirective } from ‘@swimlane/ngx-datatable/src/components/body/body-group-header.directive’; import { DatatableRowDetailTemplateDirective } from ‘@swimlane/ngx-datatable/src/components/row-detail/row-detail-template.directive’; import { DataTableBodyCellComponent } from ‘@swimlane/ngx-datatable/src/components/body/body-cell.component’; import { DataTableSelectionComponent } from ‘@swimlane/ngx-datatable/src/components/body/selection.component’; import { DataTableColumnHeaderDirective } from ‘@swimlane/ngx-datatable/src/components/columns/column-header.directive’; import { DataTableColumnCellDirective } from ‘@swimlane/ngx-datatable/src/components/columns/column-cell.directive’; import { DatatableFooterDirective } from ‘@swimlane/ngx-datatable/src/components/footer/footer.directive’; import { DatatableGroupHeaderTemplateDirective } from ‘@swimlane/ngx-datatable/src/components/body/body-group-header-template.directive’;

import { ScrollbarHelper } from ‘@swimlane/ngx-datatable/src/services/scrollbar-helper.service’;

@NgModule({ imports: [ CommonModule ], declarations: [ DataTableFooterTemplateDirective, DatatableComponent, VisibilityDirective, DraggableDirective, ResizeableDirective, OrderableDirective, LongPressDirective, ScrollerComponent, DatatableComponent, DataTableColumnDirective, DataTableHeaderComponent, DataTableHeaderCellComponent, DataTableBodyComponent, DataTableFooterComponent, DataTablePagerComponent, ProgressBarComponent, DataTableBodyRowComponent, DataTableRowWrapperComponent, DatatableRowDetailDirective, DatatableGroupHeaderDirective, DatatableRowDetailTemplateDirective, DataTableBodyCellComponent, DataTableSelectionComponent, DataTableColumnHeaderDirective, DataTableColumnCellDirective, DatatableFooterDirective, DatatableGroupHeaderTemplateDirective ], providers: [ ScrollbarHelper ], exports: [ DataTableFooterTemplateDirective, DatatableComponent, VisibilityDirective, DraggableDirective, ResizeableDirective, OrderableDirective, LongPressDirective, ScrollerComponent, DatatableComponent, DataTableColumnDirective, DataTableHeaderComponent, DataTableHeaderCellComponent, DataTableBodyComponent, DataTableFooterComponent, DataTablePagerComponent, ProgressBarComponent, DataTableBodyRowComponent, DataTableRowWrapperComponent, DatatableRowDetailDirective, DatatableGroupHeaderDirective, DatatableRowDetailTemplateDirective, DataTableBodyCellComponent, DataTableSelectionComponent, DataTableColumnHeaderDirective, DataTableColumnCellDirective, DatatableFooterDirective, DatatableGroupHeaderTemplateDirective ] }) export class NgxDatatableStubModule { } `

[karljv]

Upgrading to

"@swimlane/ngx-datatable": "13.1.0",

solved it for me.