Angular 16升级后PlotlyViaCDNModule导入报错求助

问题分析 #

你遇到的Error: Unexpected value "PlotlyViaCDNModule" imported by the module 'AppModule'. Please add an @NgModule annotation错误，以及VS Code中的红色下划线，主要源于以下几个原因：

• angular-plotly.js版本与Angular 16的兼容性不匹配
• 导入的模块类型错误或模块定义变更
• TypeScript类型包与plotly.js核心包版本不一致

解决方案 #

1. 修正模块导入方式 #

PlotlyViaCDNModule在新版本angular-plotly.js中已不再推荐使用，建议改用官方标准的PlotlyModule，并通过配置启用CDN加载：

修改AppModule中的导入代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PlotlyModule } from 'angular-plotly.js';

@NgModule({
  imports: [
    BrowserModule,
    // 配置CDN地址，版本与你安装的plotly.js-dist-min一致
    PlotlyModule.forRoot({
      plotlyBundle: 'https://cdn.plot.ly/plotly-2.27.1.min.js'
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 对齐TypeScript类型包版本 #

你安装的@types/plotly.js-dist-min@2.3.4与plotly.js-dist-min@2.27.1版本差距过大，这会导致VS Code类型检查报错。请升级类型包到匹配版本：

npm install @types/plotly.js-dist-min@^2.27.0 --save-dev

3. 清理依赖缓存并重新安装 #

可能存在依赖缓存或安装不完整问题，执行以下步骤：

• 删除node_modules文件夹和package-lock.json文件
• 清除npm缓存：

npm cache clean --force

• 重新安装所有依赖：

npm install

4. 验证angular-plotly.js版本兼容性 #

确认angular-plotly.js@4.0.4是否支持Angular 16，若存在兼容性问题，升级到最新兼容版本：

npm install angular-plotly.js@latest --save

升级后重新检查模块导入配置。

验证修复 #

完成上述步骤后：

1. 重启VS Code，检查红色下划线是否消失
2. 执行ng serve启动项目，确认浏览器不再出现模块导入错误
3. 测试Plotly图表组件是否正常渲染

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