Angular12+DevExtreme20.1.9中dx-scheduler组件报错求助

使用Angular 12.2.17 + DevExtreme 20.1.9开发时，dx-scheduler组件无法正常渲染，抛出两个关键错误：

错误1：getHashCode 调用失败 #

error.handler.ts:12  client error.  TypeError: Cannot read properties of undefined (reading 'getHashCode')
    at Object.getHashCode (stimulsoft.reports.js:39:20900)
    at Object.getHashCode (stimulsoft.reports.js:39:21024)
    at OptionManager.value (option_manager.js:102:1)
    at OptionManager.value (option_manager.js:72:1)
    at OptionManager.value (option_manager.js:115:1)
    at Options.value (index.js:203:1)
    at inheritor.option (component.js:325:1)
    at inheritor._initOptions (component.js:116:1)
    at inheritor._createOptions (component.js:110:1)
    at inheritor.ctor (component.js:81:1)

错误2：triggerResize 调用失败 #

TypeError: Cannot read properties of undefined (reading 'triggerResize')
    at inheritor._dimensionChanged (ui.scheduler.js:706:32)
    at inheritor._dimensionChanged (class.js:17:1)
    at push.83882.Callback._fireCore (callbacks.js:24:1)
    at push.83882.Callback.fireWith (callbacks.js:76:1)
    at push.83882.Callback.fire (callbacks.js:84:1)
    at handleResize (resize_callbacks.js:43:1)
    at _ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28767:1)
    at _ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)

组件代码 #

HTML 模板 #

<div class="container py-5 my-5">
  <dx-scheduler [dataSource]="appointments"
                [currentDate]="currentDate">
  </dx-scheduler>
</div>

TypeScript 组件 #

@Component({
  selector: 'inspections-new',
  templateUrl: 'inspections-new.component.html',
})
export class InspectionsNewComponent {
  appointments = [{
    text: "Website Re-Design Plan",
    startDate: new Date("2016-04-25T01:30:00.000Z"),
    endDate: new Date("2016-04-25T03:30:00.000Z")
  }, {
    text: "Book Flights to San Fran for Sales Trip",
    startDate: new Date("2016-04-25T09:00:00.000Z"),
    endDate: new Date("2016-04-25T10:00:00.000Z")
  }];
  
  currentDate = new Date(2016, 4, 25);
}  

期望效果：dx-scheduler正常渲染日程内容，无报错。

1. 解决Stimulsoft与DevExtreme的全局方法冲突 #

错误栈显示问题源于stimulsoft.reports.js中的getHashCode覆盖了DevExtreme依赖的同名全局方法，导致DevExtreme调用时上下文丢失。

• 隔离Stimulsoft作用域：将Stimulsoft的脚本包裹在IIFE中，避免污染全局对象：

  (function() {
    // 加载Stimulsoft相关脚本的代码放在这里
  })();
  

• 调整加载顺序：确保DevExtreme的脚本在Stimulsoft之前加载，这样DevExtreme的getHashCode不会被覆盖。

2. 升级DevExtreme版本 #

DevExtreme 20.1.9发布于2020年，与Angular 12（2021年版本）兼容性不足。升级到与Angular 12匹配的DevExtreme版本（官方推荐21.1及以上），新版本不仅修复了这类兼容性问题，还能更好适配Angular 12的特性。

3. 确认模块导入正确 #

确保在Angular模块中正确导入DxSchedulerModule：

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
  imports: [
    // 其他模块
    DxSchedulerModule
  ],
  declarations: [InspectionsNewComponent]
})
export class YourFeatureModule { }

4. 临时应急修复（不推荐长期使用） #

如果无法立即升级或调整加载顺序，可以在DevExtreme加载后、Stimulsoft加载前，重新定义全局的getHashCode方法：

window.getHashCode = window.getHashCode || function(obj) {
  if (!obj) return 0;
  let hash = 1;
  Object.keys(obj).forEach(key => {
    const value = obj[key];
    hash = ((hash << 5) - hash) + (typeof value === 'string' ? value.hashCode() : String(value).hashCode());
    hash |= 0;
  });
  return hash;
};

内容的提问来源于stack exchange，提问作者Moatasem Al-naimat