如何无需重建Angular应用即可管理「静态」数据的更新？

针对你提出的“开发用版本控制内的模拟数据，部署后可单独更新数据文件”需求，行业内的标准实现流程如下：

1. 分离开发与生产数据文件 #

• 在src/assets目录下创建两个数据文件：
  • data.dev.json：开发/测试用的模拟数据，加入Git版本控制（不加入.gitignore）
  • data.prod.json：生产环境占位文件，不加入版本控制，在.gitignore中添加规则：src/assets/data.prod.json

2. 基于环境变量动态切换数据源 #

Angular自带的环境配置系统可实现开发/生产环境的数据源区分：

• 修改src/environments/environment.ts（开发环境）：

  export const environment = {
    production: false,
    dataUrl: './assets/data.dev.json'
  };
  

• 修改src/environments/environment.prod.ts（生产环境）：

  export const environment = {
    production: true,
    dataUrl: './assets/data.prod.json'
  };
  

• 更新组件代码，用环境变量替换硬编码路径：

  import { environment } from '../environments/environment';
  
  urlDataFile = environment.dataUrl;
  data: any = null;
  
  constructor(private _http: HttpClient) {
    this.loadData().subscribe({
      next: (res) => this.data = res,
      error: (err) => console.error('数据加载失败:', err) // 补充错误处理
    });
  }
  
  private loadData() {
    return this._http.get(this.urlDataFile);
  }
  

3. 配置构建规则，控制文件打包 #

修改angular.json的构建配置，确保生产构建时只打包生产数据文件：
找到projects -> [你的项目名] -> architect -> build -> options -> assets节点，调整为：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "data.prod.json",
    "input": "src/assets/",
    "output": "./assets/"
  },
  {
    "glob": "!data.dev.json",
    "input": "src/assets/",
    "output": "./assets/"
  }
]

• 此配置会在生产构建时，将data.prod.json复制到dist目录，同时排除data.dev.json；开发构建则包含所有assets文件。

4. 部署与更新流程规范 #

• 生产构建：执行ng build --prod后，dist目录的assets下会生成data.prod.json（来自本地占位文件）
• 部署前替换：将实际生产数据文件替换dist目录中的data.prod.json，再部署到服务器
• 后续数据更新：直接替换服务器上[部署路径]/assets/data.prod.json文件即可，无需重新构建或部署整个应用

额外注意事项 #

• 缓存处理：为避免浏览器缓存旧数据，可在HTTP请求中添加时间戳参数，或配置服务器对data.prod.json设置短缓存/禁用缓存：

  private loadData() {
    const url = `${this.urlDataFile}?t=${new Date().getTime()}`;
    return this._http.get(url);
  }
  

• 错误处理：务必添加HTTP请求的错误捕获逻辑，避免数据加载失败导致应用功能异常

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