Angular项目assets文件夹存文件后触发组件刷新导致链接失效如何解决

Angular CLI 11及以上版本 #

Angular CLI 11开始内置了热重载排除配置，无需修改其他配置即可实现指定目录忽略变更检测：

1. 打开项目根目录下的angular.json配置文件
2. 定位到 projects > 你的项目名 > architect > serve > options 节点
3. 新增liveReloadExclude配置项：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "options": {
            // 其他原有配置保留
            "liveReloadExclude": ["**/assets/**"]
            // 如果只需要排除assets下的子文件夹，比如存放生成PDF的generated目录，改为：
            // "liveReloadExclude": ["**/assets/generated/**"]
          }
        }
      }
    }
  }
}

4. 重启ng serve命令，后续assets目录下的文件变更不会触发页面重载。

Angular CLI 11以下版本 #

旧版本Angular CLI没有内置排除规则，可选择两种适配方案：

• 方案1：调整PDF存储路径，将服务端生成的PDF存储到服务端自身的静态资源托管目录，前端直接请求服务端的静态资源地址或文件下载接口，完全避开前端项目源码目录的变更检测范围。
• 方案2：通过自定义webpack配置修改热重载规则：
  1. 安装和当前Angular版本匹配的@angular-builders/custom-webpack依赖
  2. 项目根目录新增custom-webpack.config.js文件，添加如下配置：

  module.exports = {
    devServer: {
      watchOptions: {
        ignored: /src\/assets\/generated-pdfs/
      }
    }
  }
  

  3. 修改angular.json中serve节点的builder配置为@angular-builders/custom-webpack:dev-server，关联自定义配置文件后重启ng serve即可生效。

注意事项 #

• 生产环境请勿将前端assets目录作为生成类文件的存储路径，前端打包时会覆盖assets目录内的动态生成文件，建议统一由服务端或对象存储服务托管动态生成的PDF资源。
• 所有对angular.json、自定义webpack配置的修改，都需要重启ng serve才会生效。

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