I am using Angular slickgid. Recently i have upgraded to slickgrid 7.0.3. (https://github.com/ghiscoding/Angular-Slickgrid) After i upgraded its working fine using ng s, The grid loading perfectly. When i generate using ng build (no error and generate package success fully ) and locally i have run the generated file using http-server dist\browser i am getting below error when page loads. (Ng build)
chunk-JQKIRE7U.js:38 ERROR TypeError: Function.prototype.toString requires that 'this' be a Function
at Boolean.toString (<anonymous>)
at Boolean.l (polyfills-ACABCK6S.js:2:3565)
at i.isPlainObject (chunk-JQKIRE7U.js:46:12916)
at i.extend (chunk-JQKIRE7U.js:46:13381)
at i.mergeGridOptions (chunk-JQKIRE7U.js:67:37685)
at i.initialization (chunk-JQKIRE7U.js:67:20979)
at i.ngAfterViewInit (chunk-JQKIRE7U.js:67:18331)
at XA (chunk-JQKIRE7U.js:38:13512)
at a4 (chunk-JQKIRE7U.js:38:13662)
at yM (chunk-JQKIRE7U.js:38:13418)
handleError @ chunk-JQKIRE7U.js:38
I am struggling issue since 3 days. Please some one help me to debug the same.
EDIT:After ngOnInit() i am getting this error in the console.
NOTE : I am having issue only in deployed packaged ( ng s loading the grid perfectly
<angular-slickgrid gridId="userGrid" [columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions" [dataset]="dataset"
(onAngularGridCreated)="angularGridReady($event.detail)">
</angular-slickgrid>
TS Code:
constructor() {this.graphqlService = new GraphqlService();}
ngOnInit(): void {this.columnDefinitions = [
{
id: 'edit',
field: 'id',
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
formatter: Formatters.icon , params: { iconCssClass: 'fa fa-pencil pointer' },
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => { this.router.navigate(['/user/user-detail/' + args.dataContext.id]);}
},
{ id: 'userName', field: 'userName', name: 'User Id', filterable: true, sortable: true },
{ id: 'fullName', field: 'fullName', name: 'Name', filterable: true, sortable: true }
];
this.gridOptions = {
excelExportOptions:{
sanitizeDataExport: true,
exportWithFormatter:true,
},
backendServiceApi: {
service: this.graphqlService,
options: {
columnDefinitions: this.columnDefinitions,
datasetName: GRAPHQL_QUERY_DATASET_NAME,
},
process: (query):any => this.getUsers(),
}
};
}
getUsers(): Observable<GraphqlPaginatedResult> {
var args = this.pageService.getPageArgs(this.angularGrid);
return this.dataService.searchUsers(args)
.pipe(map(
(page:any) => {
var result: GraphqlPaginatedResult = {
data: {
[GRAPHQL_QUERY_DATASET_NAME]: {
nodes: page.items,
totalCount: page.totalCount,
}
}
};
return result;
}));
}
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
}
ng build --verbose getting below
Building...
One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
⠙ Building...
● [DEBUG] Failed to read directory "D:\\Personal\\Workspace\\CorePigmyWeb\\angular:script\\global:scripts": open D:\Personal\Workspace\CorePigmyWeb\angular:script: The system cannot find the file specified.
scripts-NCWJS6GS.js 58.7kb
Done in 28ms
34.0kb
⠸ Building...
[DEBUG] Indirect calls to "require" will not be bundled [indirect-require]
node_modules/jszip/dist/jszip.min.js:22:39:
22 │ var t = "function" == typeof require && require;
╵ ~~~~~~~
● [DEBUG] Indirect calls to "require" will not be bundled [indirect-require]
node_modules/jszip/dist/jszip.min.js:22:50:
22 │ var t = "function" == typeof require && require;
╵ ~~~~~~~
● [DEBUG] Indirect calls to "require" will not be bundled [indirect-require]
node_modules/jszip/dist/jszip.min.js:38:38:
38 │ for (var l = "function" == typeof require && require, e = 0; e < h.length; e++) u(h[e]);
╵ ~~~~~~~
● [DEBUG] Indirect calls to "require" will not be bundled [indirect-require]
node_modules/jszip/dist/jszip.min.js:38:49:
38 │ for (var l = "function" == typeof require && require, e = 0; e < h.length; e++) u(h[e]);
╵ ~~~~~~~
⠧ Building...
● [DEBUG] Top-level "this" will be replaced with undefined since this file is an ECMAScript module [this-is-undefined-in-esm]
node_modules/@slickgrid-universal/common/dist/esm/formatters/multipleFormatter.js:21:34:
21 │ currentValue = formatter.call(this, row, cell, currentValue, columnDef, dataContext, grid);
│ ~~~~
╵ undefined
This file is considered to be an ECMAScript module because of the "export" keyword here:
node_modules/@slickgrid-universal/common/dist/esm/formatters/multipleFormatter.js:7:0:
7 │ export const multipleFormatter = (row, cell, value, columnDef, dataContext, grid) => {
╵ ~~~~~~
⠇ Building...
chunk-JQKIRE7U.js 1.6mb
main-VVD2PVG7.js 463.0kb
chunk-DEKKHDHY.js 65.3kb
chunk-WCYH7E3Y.js 38.1kb
chunk-NONLWZGG.js 37.2kb
chunk-FWIQXCOO.js 35.9kb
chunk-RWBMCJU6.js 25.4kb
chunk-6NBPDX4E.js 20.5kb
chunk-7A6ZKOF6.js 17.8kb
chunk-7AXFXNEN.js 10.8kb
chunk-7EFFINHE.js 4.5kb
chunk-SBSTWZEV.js 2.4kb
chunk-NAIX5QOX.js 1.8kb
chunk-WWHRMCBO.js 1.6kb
chunk-SPBBN3FK.js 1.3kb
...and 5 more output files...
⠏ Building...
▲ [WARNING] `alert-variant()` has been deprecated as of v4.3.0. It will be removed entirely in v6.0.0. [plugin angular-sass]
angular:styles/global:styles:7:8:
7 │ @import 'src/scss/style.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~
▲ [WARNING] `list-group-item-variant()` has been deprecated as of v4.3.0. It will be removed entirely in v6.0.0. [plugin angular-sass]
angular:styles/global:styles:7:8:
7 │ @import 'src/scss/style.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~
⠋ Building...
▲ [WARNING] 4 rules skipped due to selector errors:
.form-floating>~label -> Did not expect successive traversals.
.form-floating>~label -> Did not expect successive traversals.
.form-floating>~label -> Did not expect successive traversals.
.form-floating>~label -> Did not expect successive traversals.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
chunk-JQKIRE7U.js | - | 1.56 MB | 361.05 kB
styles-AT4IW3U3.css | styles | 822.61 kB | 70.50 kB
main-VVD2PVG7.js | main | 462.96 kB | 87.61 kB
scripts-NCWJS6GS.js | scripts | 58.74 kB | 14.57 kB
polyfills-ACABCK6S.js | polyfills | 33.96 kB | 11.03 kB
chunk-7EFFINHE.js | - | 4.55 kB | 962 bytes
chunk-SBSTWZEV.js | - | 2.41 kB | 787 bytes
chunk-NAIX5QOX.js | - | 1.82 kB | 557 bytes
chunk-SPBBN3FK.js | - | 1.34 kB | 453 bytes
chunk-MUIJUO33.js | - | 1.34 kB | 466 bytes
chunk-IMFXHPGH.js | - | 1.32 kB | 476 bytes
chunk-AI5VQ6CL.js | - | 1.17 kB | 387 bytes
chunk-TNZ3CRMV.js | - | 1.07 kB | 389 bytes
chunk-2NDHNDTE.js | - | 788 bytes | 788 bytes
| Initial Total | 2.92 MB | 549.89 kB
Lazy Chunk Files | Names | Raw Size | Estimated Transfer Size
chunk-DEKKHDHY.js | collection-module | 65.31 kB | 10.83 kB
chunk-WCYH7E3Y.js | user-module | 38.09 kB | 7.17 kB
chunk-NONLWZGG.js | account-module | 37.21 kB | 6.73 kB
chunk-FWIQXCOO.js | branch-module | 35.93 kB | 7.11 kB
chunk-RWBMCJU6.js | bank-module | 25.44 kB | 4.94 kB
chunk-6NBPDX4E.js | reports-module | 20.47 kB | 3.34 kB
chunk-7A6ZKOF6.js | transaction-module | 17.77 kB | 4.37 kB
chunk-7AXFXNEN.js | - | 10.79 kB | 3.45 kB
chunk-WWHRMCBO.js | - | 1.57 kB | 300 bytes
Application bundle generation complete.
The latest version of Angular-Slickgrid v7.1.0 should resolve this issue. The problem was fixed by reimplementing the
extendwith thenode-extendapproach.For jszip, you should follow all instructions from the new documentation website, take a look at the Quick Start
EDIT
excel-builder-webpackerwas rewritten to a new excel-builder-vanilla fork, it no longer requires JSZip (it now usesfflate) and you no longer need to care about it either sincefflatedoesn't require any particular config from your side. The reason for the new fork was mainly to modernize the project, with these changesQ(replaced by nativePromise)Lodash(replaced by native JS code)JSZipwithfflate(the latter supports ESM and Tree Shaking)This new librare is now used in Angular-Slickgrid v7.4.x and higher