尝试在生产中构建 Angular 应用程序时出现数据表错误

Question

每当我在终端上执行ng build --prod 时，都会出现以下错误。我一直在阅读，它说我需要在我的构造函数上将 private 关键字更改为 public，但我已经尝试过了，但它没有用。

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.

下面是我在 html 文件中使用数据表的地方。我尝试删除 [resizeable] 以尝试修复最后一个错误，但没有奏效。

    <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>

我试图从我一直在做的阅读中将 productService 从私有变为公共的组件，但这不起作用：

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();
  }
}

Answer 1

您必须避免 AOT。所以写

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

我认为它会起作用。

Answer 2

问题在于angular5-data-table。它的DataTable.html 尝试访问DataTableComponent 类的私有方法resizeColumnStart。

为什么在构建您的 Angular 生产应用程序（使用 AOT）时这不起作用，请参阅 https://stackoverflow.com/a/43177386/2358409。

请注意，根据 Angular 文档 (Coosing a compiler)，ng build --prod 默认使用 AOT 编译。因此，您的问题可以通过以下两种方式解决。

1. 将angular5-data-table 模块替换为最新的表模块（即Angular Material Table）
2. 在构建生产应用程序时禁用 AOT (ng build --prod --aot=false)