Angular部署后无法识别JSON文件修改的问题求助

你当前通过import导入JSON文件的方式，会在Angular构建阶段将JSON内容直接嵌入到编译后的JS代码中。部署后修改assets目录下的JSON文件时，程序运行时读取的是打包时已固化的旧值，自然不会同步更新。

要实现无需重建项目即可更新服务器地址，需要改成运行时动态请求JSON文件，而非构建时导入。具体步骤如下：

1. 修正environment.prod.ts的语法错误并调整配置 #

原代码中production= true是语法错误，需改为冒号；同时清空url字段，后续通过动态加载赋值：

export const environment = {
  production: true,
  url: '' // 初始为空，后续动态加载填充
};

2. 创建配置加载服务 #

新建config.service.ts，利用HttpClient动态请求assets中的JSON文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  constructor(private http: HttpClient) {}

  loadServerConfig(): Promise<void> {
    return this.http.get('/assets/server.json')
      .toPromise()
      .then(config => {
        // 赋值到environment.url
        environment.url = (config as { serverip: string }).serverip;
      })
      .catch(error => {
        console.error('加载服务器配置失败:', error);
        // 可选：设置默认地址作为降级方案
        environment.url = 'http://默认 fallback 地址/api';
      });
  }
}

3. 在应用启动前加载配置 #

修改app.module.ts，通过APP_INITIALIZER确保应用启动时先完成配置加载：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ConfigService } from './config.service';

// 定义初始化函数
function initConfig(configService: ConfigService) {
  return () => configService.loadServerConfig();
}

@NgModule({
  imports: [HttpClientModule], // 必须导入HttpClientModule才能发起请求
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule {}

4. 处理浏览器缓存问题 #

部署后修改JSON文件可能被浏览器缓存，导致无法立即生效。可以通过两种方式解决：

• 给JSON文件名添加版本号（如server.v2.json），同时修改服务中的请求路径
• 配置服务器（如Nginx）禁止缓存JSON文件：

location ~* \.json$ {
    expires -1;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, max-age=0';
}

5. 正常使用配置 #

后续在项目中需要使用服务器地址时，依然直接引用environment.url即可，启动时已完成动态赋值。

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