Angular升级到12后修改node_modules内库代码不生效调试问题求解

核心原因说明 #

Angular 12 版本开始默认开启全局构建缓存机制，会缓存已编译的第三方依赖产物，直接修改 node_modules 内的文件不会触发缓存自动失效，是导致变更不生效的核心原因。

可行调试方案 #

方案1：临时禁用构建缓存（最快适配原有调试习惯） #

适合仅需少量修改验证的场景：

• 启动开发服务时添加禁用缓存参数，命令为 ng serve --no-cache
• 若此前已有缓存残留，先删除项目下的缓存目录：rm -rf .angular/cache（Windows环境对应删除 .angular\cache 文件夹）后再启动服务即可

方案2：增量构建+软链接联动（推荐长期调试使用） #

比直接修改node_modules更稳定，避免全量编译耗时问题：

• 在库项目根目录执行增量构建监听命令：ng build [你的库名称] --watch，partial编译模式下仅会编译变更文件，增量构建耗时通常在秒级
• 库构建完成后，进入库的dist输出目录执行 npm link 注册全局软链接
• 回到应用项目根目录执行 npm link [你的库名称]，将应用的依赖指向库的实时构建产物
• 后续修改库代码后会自动触发增量构建，应用端会自动热重载生效，无需手动修改node_modules文件
• 调试结束后在应用目录执行 npm unlink [你的库名称] 即可恢复原有依赖配置

方案3：直接修改node_modules产物适配 #

如果坚持原有直接改node_modules的调试方式：

• 先关闭开发服务，删除 .angular/cache 缓存目录
• 同步修改 node_modules/library/fesm2015 和 node_modules/library/__ivy_ngcc__/fesm2015 两个路径下的对应文件，避免ngcc自动重新处理时覆盖改动
• 启动开发服务时带上 --no-cache 参数即可

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