Issue
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.
Solution
The latest version of Angular-Slickgrid v7.1.0 should resolve this issue. The problem was fixed by reimplementing the extend with the node-extend approach.
For jszip, you should follow all instructions from the new documentation website, take a look at the Quick Start
Answered By - ghiscoding
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.