Angular 12升级ngx-markdown后遇Invalid version错误求解决方案

问题背景 #

• 项目基于Angular 12，因必填依赖限制无法升级到Angular 13
• 升级ngx-markdown至v12.1.0后，先触发node_modules/marked/lib/marked.js does not exist错误，按GitHub建议修改angular.json路径配置后，又出现新错误：

  Error: Transform failed with 1 error: 
  error: Invalid version: "15.2-15.3"
  

• 已尝试但无效的操作：
  • 升级@angular/cli到12.2.16
  • 删除node_modules和package-lock.json后重新安装依赖
  • 删除.browserslistrc文件或添加ios_saf 15.2-15.3配置

可行解决办法 #

1. 锁定marked库的兼容版本 #

ngx-markdown v12.1.0依赖的marked版本可能与Angular 12的browserslist解析逻辑不兼容，手动指定marked为Angular 12适配的版本：

• 在package.json中添加resolutions字段：

  "resolutions": {
    "marked": "3.0.8"
  }
  

• 若使用npm，需确保版本支持resolutions（或借助npm-force-resolutions工具），执行npm install重新安装依赖；若用yarn，直接添加后执行yarn install即可。

2. 修改browserslist的版本格式 #

Angular 12的browserslist解析器不支持15.2-15.3这种写法，替换成兼容的范围格式：

• 在.browserslistrc中把ios_saf 15.2-15.3改成：

  ios_saf >=15.2
  

  或根据需求调整为更精确的版本范围。

3. 强制覆盖Angular构建的browserslist配置 #

在angular.json的项目build选项中直接指定兼容的浏览器版本，绕过外部配置冲突：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          "browserslist": [
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Edge versions",
            "ios_saf >=15.2"
          ]
        }
      }
    }
  }
}

4. 排查依赖自带的browserslist配置 #

部分第三方依赖可能自带browserslist配置导致冲突，可在package.json中添加统一的browserslist配置覆盖所有依赖：

"browserslist": [
  "last 2 Chrome versions",
  "last 2 Firefox versions",
  "last 2 Edge versions",
  "ios_saf >=15.2"
]

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