Angular 10升级Highcharts 11失败：无合适loader处理文件类型

云上老周

2026-7-4

解决Angular 10升级Highcharts至11.2.0后的模块解析错误

问题现象

升级后触发如下报错：

./node_modules/highcharts/highcharts.js 8:5207
模块解析失败：意外的标记 (8:5207)
可能需要合适的loader来处理该文件类型，当前未配置任何loader处理此文件。

原因分析

Highcharts 11.x版本的发布包引入了ES6+语法，而Angular 10默认的webpack配置对这类语法的处理支持不足，导致无法解析文件中的新语法标记。

解决方案

方案1：使用Highcharts的ES5兼容版本

修改导入语句，直接指向ES5版本的源码文件：

import * as Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';

也可以在angular.json中配置别名，统一管理导入路径：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          "paths": {
            "highcharts": ["./node_modules/highcharts/es-modules/masters/highcharts.src.js"]
          }
        }
      }
    }
  }
}

方案2：用Babel处理Highcharts文件

安装依赖包：

npm install babel-loader @babel/core @babel/preset-env @angular-builders/custom-webpack --save-dev

在项目根目录创建webpack.config.js，添加规则处理Highcharts文件：

module.exports = {
  module: {
    rules: [
      {
        test: /highcharts\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

修改angular.json，让Angular使用自定义webpack配置：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./webpack.config.js"
          }
        }
      },
      "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server"
      }
    }
  }
}