Angular使用pipe与mergeMap时出现Uncaught in promise错误如何解决

数据老陈

2026-9-26

报错根因定位

这个Cannot read properties of undefined (reading 'type')报错来自ApexCharts内部读取配置时触发，你开发环境能正常渲染是因为错误由上一次的旧图表实例抛出，新实例渲染流程没被阻塞，生产环境代码压缩后执行时序变化，大概率会出现渲染失败的问题。
核心触发点有两个：

多次请求存在竞态，前一次请求返回晚于后一次，配置被覆盖
共用模板时，旧图表实例未销毁，新配置赋值不完整就被ApexCharts读取

修复步骤

1. 替换RxJS操作符解决竞态问题

把mergeMap换成switchMap，切换CSV时自动取消上一次未完成的请求，避免旧请求返回后覆盖新配置：

import { switchMap } from 'rxjs/operators';

this.service.getCsv().pipe(
    switchMap((data) => {
        const dtLst = getDate(data);
        return this.service.getDB(dtLst);
    })
).subscribe({
    next: (result) => {
        // 先销毁旧实例
        if (this.chartInstance) {
            this.chartInstance.destroy();
            this.chartInstance = null;
        }
        // 处理配置渲染
        switch(csvType) {
            // 生成对应图表配置
        }
    },
    error: (err) => console.error('请求链路错误：', err)
})

2. 优化配置更新逻辑

不要直接修改原有配置对象的引用，每次渲染新图表时重新生成完整的配置对象，避免ApexCharts监听配置变化时读到未赋值完成的字段：

// 错误写法：修改原有配置的属性
// this.chartConfig.type = 'line';
// this.series[0].data = result.data;

// 正确写法：生成全新的配置对象
this.chartConfig = {
    type: 'line',
    // 补全所有必填配置项
    height: 350,
    ...
};
this.series = [{
    name: '指标',
    type: 'line',
    data: result.data
}];

3. 强制组件销毁重建（可选）

如果用的是ng-apexcharts组件封装，切换CSV时通过*ngIf指令控制组件销毁重建，彻底清空旧实例的残留状态：

<!-- 模板部分 -->
<apx-chart 
  *ngIf="showChart"
  [series]="series" 
  [chart]="chartConfig"
  [xaxis]="xaxisConfig"
></apx-chart>

切换CSV时先把showChart设为false，拿到新接口返回数据后再设为true即可。

验证方法

连续切换两次不同的CSV，确认控制台无报错，每次渲染的图表数据和选中的CSV对应即可。

内容的提问来源于stack exchange，提问作者beginnercoder