angularslickgridangular-slickgridslickgriduniversal

Angular slick grid error after deployed package

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

enter image description here

   <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

    EDIT

    excel-builder-webpacker was rewritten to a new excel-builder-vanilla fork, it no longer requires JSZip (it now uses fflate instead) and you no longer need to care about its installation either since fflate doesn't require any particular config from the user's side (no config needed). The reason for the new fork was mainly to modernize the project, with this list of changes

    This new library is now used in Angular-Slickgrid v7.4.x and higher