I have an angular component npm package, which accepts and returns data. It all worked fine, until I tried adding a p-table into my html. I have narrowed it down to occurring in the components module file.

I can add the primeNg tableModule into my app.module file, but if I try to add it to my components module file and then run "npm run packagr" to bundle my package, I get the following error:

Maximum call stack size exceeded

Here is my header.module file, and the two lines causing the error

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
import { TableModule } from 'primeng/table'; //TABLE MODULE IS CAUSING THE ERROR

@NgModule({
  declarations: [HeaderComponent],
  imports: [CommonModule, TableModule], //TABLE MODULE IS CAUSING THE ERROR
  exports: [
    HeaderComponent,
  ],
})
export class HeaderModule {}

I have looked at other answers for this error, however they mostly talk about a recursive loop, whereas my error occurs just by adding the TableModule to the modules file.

Does anyone know why this is causing the error?

UPDATE!!!

Here is the p-table I am trying to implement in my header.html file:

  <p-table
    [columns]="this.templateRows"
    [value]="this.tableData"
    responsiveLayout="scroll"
    [scrollable]="true"
    scrollHeight="100px"
    [virtualScroll]="true"
  >
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns">
          {{ col.header }}<br />
          <small>{{ col.regex }}</small>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr>
        <td *ngFor="let col of columns">
          {{ rowData[col.header] }}
        </td>
      </tr>
    </ng-template>
  </p-table>

And here is the app.module which imports the tableModule fine:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderModule } from './modules/header/header.module';
import { TableModule } from 'primeng/table';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HeaderModule, TableModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Here is the header.component.ts file

import {
  Component,
  EventEmitter,
  OnInit,
  Input,
  Output,
  ViewChild,
  ElementRef,
} from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-header-naomi',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  @ViewChild('fileUpload', { static: false }) fileUpload: ElementRef;
  headerRow: any = [];
  tableData: any = [];
  templateRows = [
    { field: 'name', header: 'Name', regex: '[a-zA-Z]' },
    { field: 'age', header: 'Age', regex: '^[0-9]*$' },
    { field: 'year group', header: 'Year Group', regex: null },
  ];

  constructor() {}

  ngOnInit(): void {
  }
 
  processUpload() {
    const fileUpload = this.fileUpload.nativeElement;
    fileUpload.click();
  }

  async uploadFiles() {
    const fileUpload = this.fileUpload.nativeElement;
    this.tableData = this.validateSpreadsheet(fileUpload, this.templateRows);
  }

  async validateSpreadsheet(fileUpload: any, templateRows: any) {
    let uploadData: any = [];
    for (const file of fileUpload.files) {
      const fileExtension = file.name.split('.').pop();
      let valid = false;
      if (fileExtension === 'csv') {
        valid = true;
      }
      if (!valid) {
        throw "Unsupported file type, file must be 'of type .csv";
      }
      const reader = new FileReader();

      reader.onload = async (e: any) => {
        const data = new Uint8Array(e.target.result);

        const workbook = XLSX.read(data, {
          type: 'array',
          cellDates: true,
          dateNF: 'dd/mm/yyyy',
        });
        if (workbook.SheetNames.length === 0) {
          console.error('No sheets');
        }
        for (const sheetName of workbook.SheetNames) {
          const rows: any = XLSX.utils.sheet_to_json(
            workbook.Sheets[sheetName],
            {
              defval: null,
            }
          );

          for (let row of rows) {
            uploadData.push(row);
          }
        }
      };
      reader.readAsArrayBuffer(file);
      return uploadData;
    }
  }
}

CodePudding user response：

Not sure what was wrong with this, but I managed to fix it by uninstalling node modules and package-lock.json file. Then reinstalled.