Angular SlickGrid 7.0.3部署包加载报错求助（本地运行正常）
2026-7-3
Angular SlickGrid 7.0.3 生产构建后运行报错：Function.prototype.toString requires that 'this' be a Function
问题描述
使用Angular SlickGrid 7.0.3版本，本地ng s开发时表格加载完全正常；但执行ng build生成部署包（构建无报错），通过http-server dist\browser运行时页面触发以下错误，仅生产环境出现，开发环境无此问题。
错误栈
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
组件代码
模板文件
<angular-slickgrid gridId="userGrid" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event.detail)"> </angular-slickgrid>
TS文件
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）
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.
排查与解决方案
问题根源
错误栈指向mergeGridOptions中的extend方法，调用isPlainObject时触发异常，本质是生产构建的代码压缩/混淆导致布尔值的类型判断逻辑异常，工具库误将布尔值当作对象处理。
解决方案
规范gridOptions初始化方式
使用Object.assign确保配置对象为纯字面量，避免压缩时类型混淆：this.gridOptions = Object.assign({}, { excelExportOptions: { sanitizeDataExport: true, exportWithFormatter: true, }, backendServiceApi: { service: this.graphqlService, options: { columnDefinitions: this.columnDefinitions, datasetName: GRAPHQL_QUERY_DATASET_NAME, }, process: (query): any => this.getUsers(), } });调整生产构建优化配置
在angular.json的生产构建配置中，关闭可能引发问题的压缩选项："configurations": { "production": { "optimization": { "scripts": { "pure_getters": false } } } }或降低优化级别：
"optimization": "partial"改用依赖注入实例化GraphQL服务
避免在构造函数中直接new服务，改用Angular依赖注入：constructor(private graphqlService: GraphqlService) {}升级Angular SlickGrid版本
检查是否存在后续补丁版本修复生产构建bug，升级后重新测试。
验证步骤
修改后执行ng build，再通过http-server dist\browser运行部署包，确认错误是否消失。
内容的提问来源于stack exchange，提问作者Lajith
相关产品推荐
相关产品推荐
