Angular 13如何实现node_modules中包文件变更时自动重载？

方法一：调整Angular CLI的Watch配置 #

Angular CLI默认会忽略node_modules目录的文件变更，你可以通过修改angular.json的监听规则，让它监控目标第三方包的变化：

1. 打开项目根目录下的angular.json，找到projects->你的项目名称->architect->build->options
2. 添加watchOptions配置，将目标包排除在忽略列表外（!表示取反）：

"watchOptions": {
  "ignored": ["!node_modules/你的第三方包名称/**"]
}

3. 重启ng serve，之后修改该包内的文件时，Angular会自动触发构建并重载页面。

方法二：本地软链接第三方包 #

如果直接修改node_modules觉得麻烦，可将目标包复制到本地目录，通过软链接关联，这样修改本地文件就能自动触发重载：

• 复制node_modules/目标包到项目根目录的自定义文件夹（比如local-packages/目标包）
• 进入local-packages/目标包目录，执行npm link
• 回到项目根目录，执行npm link 目标包名称，将项目依赖指向本地文件夹
• 此时修改local-packages/目标包内的文件，Angular的watch会自动监控到变化并重载

方法三：扩展Webpack配置 #

借助@angular-builders/custom-webpack扩展Webpack配置，强制监听目标包的文件变更：

1. 安装依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json中的builder配置：
   • 将architect.build.builder改为@angular-builders/custom-webpack:browser
   • 将architect.serve.builder改为@angular-builders/custom-webpack:dev-server
   • 在build.options中添加customWebpackConfig：

   "customWebpackConfig": {
     "path": "./custom-webpack.config.js"
   }
   

3. 在项目根目录创建custom-webpack.config.js，添加监听规则：

module.exports = {
  watchOptions: {
    ignored: ["!node_modules/你的第三方包名称/**"]
  }
};

4. 重启ng serve即可生效

注意事项 #

• 确认你修改的是第三方包的源码文件，而非编译后的产物（部分包会将源码放在src目录，编译后文件放在dist或根目录）
• 若修改后未触发重载，可尝试清理Angular缓存：ng cache clean

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