Angular13项目构建时ngx-toastr版本兼容报错如何解决

问题背景 #

• 基于数年前发布的开源博客源码搭建站点，原源码基于Angular v11 + 早期版本Toastr开发，用于实现错误消息提示功能
• 本地部署环境为Angular v13，前期API开发环节无异常，新增错误拦截器后前端构建失败
• 升级Angular到v14会触发大量源码兼容性问题，修复成本过高；尝试降级Angular到v11失败，执行npm --legacy-peer-deps安装依赖也未解决问题

构建报错信息 #

./node_modules/ngx-toastr/fesm2015/ngx-toastr.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: Cannot create property 'message' on string 'C:\Users\benja\CroweQuest\CroweQuest-UI\node_modules\ngx-toastr\fesm2015\ngx-toastr.mjs: This application depends upon a library published using Angular version 14.0.2, which requires Angular version 14.0.0 or newer to work correctly.
Consider upgrading your application to use a more recent version of Angular.'

• 报错完整截图可参考原问题附带材料。

解决方案 #

方案一：回退到适配Angular 13的Toastr版本 #

之前操作的核心问题是搞混了包名：Angular生态用的Toastr包全名是ngx-toastr，不是原生JS的toastr，之前卸载失败、版本装错都和这个有关。
适配Angular 13的最高稳定兼容版是ngx-toastr@14.1.4，从v14.2.0开始该包就要求最低Angular 14版本，也就是当前安装的不兼容版本。
操作步骤：

• 清理现有错误依赖：

# 卸载错误安装的包
npm uninstall ngx-toastr toastr
# 删除依赖缓存和锁文件，Windows系统可直接在资源管理器删除node_modules文件夹和package-lock.json文件
rm -rf node_modules package-lock.json

• 安装指定兼容版本：

npm install ngx-toastr@14.1.4 --legacy-peer-deps

• 原有配置无需改动：angular.json的styles数组里保留ngx-toastr的css引入，app.module.ts里的ToastrModule.forRoot()配置保持原样，重新执行ng build即可正常构建。

方案二：完全卸载Toastr #

同样因为包名写错导致之前执行的卸载命令未生效，按以下步骤操作即可彻底移除：

1. 执行正确的卸载命令移除依赖包：

   npm uninstall ngx-toastr toastr
   

2. 清理所有代码中的相关引用：
   • 打开app.module.ts，删除ToastrModule、ToastrService的import语句，以及imports数组里的ToastrModule.forRoot()配置项
   • 全局搜索项目代码，删除所有业务组件、错误拦截器里注入ToastrService的代码，以及调用toastr弹窗的相关逻辑
   • 打开angular.json，删除styles数组里node_modules/ngx-toastr/css/ngx-toastr.css这类toastr相关的样式引入路径
3. 重新安装依赖验证构建：

   # 清理缓存，Windows系统可手动删除对应文件
   rm -rf node_modules package-lock.json
   npm install
   ng build
   

如果构建仍报toastr相关错误，直接全局搜索代码中所有toastr关键词，删除残留引用即可。

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