Angular 11升级至12后页面空白，控制台报chartModule相关TypeError

• 升级依赖版本适配Angular 12
  Angular 12对ES模块规范、打包机制做了大幅调整，你当前使用的angular-highcharts@5.2.0和highcharts@6.0.3版本过于陈旧，完全不兼容Angular 12的运行环境。需升级到匹配版本：

  1. 卸载旧依赖：

     npm uninstall angular-highcharts highcharts
     

  2. 安装兼容Angular 12的版本：

     npm install angular-highcharts@12 highcharts@10
     

  注意：若项目用到Highcharts扩展模块（如stock、maps），需同步安装对应版本的highcharts-stock、highcharts-maps等包。

• 修正ChartModule的导入与使用逻辑
  旧版本angular-highcharts的导入逻辑在Angular 12下会失效，检查并调整代码：

  1. 模块中正确导入ChartModule：

     import { ChartModule } from 'angular-highcharts';
     
     @NgModule({
       imports: [
         // ...其他依赖模块
         ChartModule
       ]
     })
     export class YourFeatureModule { }
     

  2. 组件中正确初始化Chart实例：

     import { Chart } from 'angular-highcharts';
     
     export class YourComponent {
       chart = new Chart({
         title: { text: '示例图表' },
         series: [{ data: [1, 2, 3] }]
       });
     }
     

• 清理构建缓存与依赖文件
  残留缓存或损坏的依赖可能引发异常：

  1. 删除依赖目录和锁文件：

     rm -rf node_modules package-lock.json
     

  2. 清理Angular构建缓存：

     ng cache clean --all
     

  3. 重新安装依赖并构建项目：

     npm install
     ng build
     

• 排查延迟加载模块冲突
  若图表模块在延迟加载路由模块中使用，需确保：

  • 延迟加载模块独立导入ChartModule，避免根模块全局导入后子模块重复导入引发冲突
  • 路由配置中的延迟加载路径无拼写错误，模块引用逻辑正确

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