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

Posted 2023-03-13

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

【英文标题】：Getting data-table errors when trying to build angular application in production

【发布时间】：2020-02-12 18:04:33

【问题描述】：

每当我在终端上执行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();
  

【参考方案1】：

您必须避免 AOT。所以写

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

我认为它会起作用。

【参考方案2】：

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

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

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

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

【讨论】：

我将所有私有字段更改为公共字段，但仍然出现相同的错误。

与你自己的代码无关，与你当前使用的angular5-data-table模块有关