I recently encountered an issue with my Angular component npm package when I tried to incorporate a p-table into my HTML. The problem seems to be originating from the components module file.
Adding the primeNg tableModule to my app.module file works fine, but as soon as I include it in the components module file and run "npm run packagr" to bundle my package, I encounter the following error:
Maximum call stack size exceeded
Below is an excerpt from my header.module file highlighting the 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 {}
While searching for solutions to this error, most resources seem to focus on recursive loops, whereas in my case, simply adding the TableModule to the modules file triggers the error.
Could anyone shed light on why this specific inclusion is triggering the error?
UPDATE!!!
This is the p-table snippet present in my header.html file that's causing the trouble:
<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>
The following is the app.module where the tableModule import works without any issues:
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 {}
Finally, here's a glimpse at 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;
}
}
}