Getting data-table errors when trying to build angular application in production

Question

Whenever I do ng build --prod on terminal I get the following errors. I have been doing some reading and it says the I need to change the private keyword to public on my constructor but I have tried that and it did not work.

ERROR in node_modules/angular5-data-table/angular5-data-table.d.ts.DataTable.html(52,19): : Property 'resizeColumnStart' is private and only accessible within class 'DataTableComponehin class 'DataTableComponent'. node_modules/angular5-data-table/angular5-data-table.d.ts.DataTable.html(66,19): : Property 'resizeColumnStart' is private and only accessible within class 'DataTableComponent'. 'DataTableComponent'. node_modules/angular5-data-table/angular5-data-table.d.ts.DataTable.html(35,71): : Expected 2 arguments, but got 1.

Below is where I use data-table in my html file. I tried removing [resizeable] to try to fix the last error but that did not work.

    <p>
    <a routerLink="/admin/products/new" class="btn btn-primary">New Product</a>
</p>
<p>
    <input #query (keyup)="filter(query.value)" type="text" class="form-control" placeholder="Search...">
</p>

<data-table [items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)">
    <data-table-column [property]="'title'" [header]="'Title'" [sortable]="true" [resizable]="true"> </data-table-column>
    <data-table-column [property]="'price'" [header]="'Price'" [sortable]="true" [resizable]="true">
        <ng-template #dataTableCell let-item="item">
            {{ item.price | currency:'USD':true }}
        </ng-template>
    </data-table-column>
    <data-table-column [property]="'key'">
        <ng-template #dataTableCell let-item="item">
            <a [routerLink]="['/admin/products/', item.key]">Edit</a>
        </ng-template>
    </data-table-column>
</data-table>

The component where I tried to make the productService to public from private from the reading that I have been doing, but that did not work:

import { Product } from 'shared/models/product';
import { ProductService } from 'shared/services/product.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFireList } from '@angular/fire/database';
import { map } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { DataTableResource } from 'angular5-data-table';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit, OnDestroy {
  products: Product[];
  subscription: Subscription;
  tableResource: DataTableResource<Product>;
  items: Product[] = [];
  itemCount: number; 

  constructor(private productService: ProductService) { 
    this.subscription = this.productService.getAll()
      .subscribe((products: any[] )=> {
        this.products = products;
        this.initializeTable(products);
      });
  }

  private initializeTable(products: Product[]) {
    this.tableResource = new DataTableResource(products);
    this.tableResource.query({ offset: 0 })
      .then(items => this.items = items);
    this.tableResource.count()
      .then(count => this.itemCount = count);
  }

  reloadItems(params) {
    if(!this.tableResource) return;
    this.tableResource.query({ params })
      .then(items => this.items = items);
  }

  filter(query: string) {
    let filteredProducts = (query) ?
      this.products.filter(p => p.title.toLowerCase().includes(query.toLowerCase())) : 
      this.products;

    this.initializeTable(filteredProducts);
  }

  ngOnInit() {
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

score 2 · Accepted Answer · answered Oct 17 '19 at 12:21

2

You have to avoid the AOT. So write

ng b --prod --aot=false --build-optimizer=false

I think it will work.

answered Oct 17 '19 at 12:21

AmirHamza Sabuz

36
3

uminder · Answer 2 · 2019-10-17T04:22:51.067

0

The problem lies within angular5-data-table. Its DataTable.html tries to access the private method resizeColumnStart of DataTableComponent class.

Why this doesn't work when building your Angular application for production (with AOT), is explained at https://stackoverflow.com/a/43177386/2358409.

Please note that according to Angular documentation (Coosing a compiler), ng build --prod compiles with AOT by default. Hence your problem could be solved in the following two ways.

Replace angular5-data-table module by an up-to-date table module (i.e. Angular Material Table)
Disable AOT when building the application for production (ng build --prod --aot=false)

edited Oct 17 '19 at 04:22

answered Oct 16 '19 at 04:06

uminder

23,831
5
37
72

I change all private fields to public and I am still getting the same errors. – IDavidJr _ Oct 16 '19 at 19:52
It has nothing to do with your own code but with the `angular5-data-table` module you're currently using – uminder Oct 17 '19 at 03:52

Getting data-table errors when trying to build angular application in production

2 Answers2