如何实现修改proxy.conf.json后自动重启Angular项目？

方案1：用nodemon监听代理文件自动重启ng serve #

这是最直接的解决方案，通过nodemon监听代理配置文件的变化，自动重启Angular开发服务器。

1. 安装nodemon开发依赖：

npm install nodemon --save-dev

2. 修改package.json中的scripts，替换原有的启动命令：

"scripts": {
  "start": "nodemon --watch proxy.conf.js --exec 'ng serve --proxy-config proxy.conf.js'"
}

• --watch proxy.conf.js：指定监听代理配置文件的变化
• --exec 'ng serve...'：当文件变化时，自动执行Angular启动命令

之后启动项目直接运行npm start，每次修改proxy.conf.js后，nodemon会自动重启ng serve，无需手动操作。

方案2：用环境变量动态切换目标服务器，避免修改代理文件 #

如果你的核心需求只是频繁切换目标服务器，完全可以不用修改代理文件，通过环境变量动态注入target值：

1. 修改你的proxy.conf.js，将target替换为环境变量：

const PROXY_CONFIG = {
  '/api': {
    target: process.env.TARGET_SERVER || 'http://default-url',
    secure: false,
    pathRewrite: {
      '^/api': '',
    },
    logLevel: "debug"
  }
};

module.exports = PROXY_CONFIG;

2. 在package.json中添加不同环境的启动脚本：

"scripts": {
  "start:local": "TARGET_SERVER=http://local-minikube ng serve --proxy-config proxy.conf.js",
  "start:remote": "TARGET_SERVER=http://remote-demo ng serve --proxy-config proxy.conf.js"
}

• Windows系统需要用set设置环境变量："start:local": "set TARGET_SERVER=http://local-minikube && ng serve --proxy-config proxy.conf.js"

这样切换环境时，直接运行对应的脚本即可，无需修改代理文件，也不用手动重启服务。

方案3：自定义Webpack配置实现动态代理（进阶） #

如果需要更灵活的运行时代理调整，可以通过自定义Webpack配置，结合http-proxy-middleware实现动态加载代理规则，无需重启服务器：

1. 安装依赖包：

npm install @angular-builders/custom-webpack http-proxy-middleware --save-dev

2. 创建extra-webpack.config.js文件：

const fs = require('fs');
const path = require('path');
const { createProxyMiddleware } = require('http-proxy-middleware');

let proxyConfig = require('./proxy.conf.js');

// 监听代理配置文件变化，自动重新加载配置
fs.watch(path.resolve(__dirname, 'proxy.conf.js'), () => {
  delete require.cache[require.resolve('./proxy.conf.js')];
  proxyConfig = require('./proxy.conf.js');
  console.log('代理配置已更新');
});

module.exports = {
  devServer: {
    before: (app) => {
      // 应用最新的代理规则
      Object.keys(proxyConfig).forEach(context => {
        app.use(context, createProxyMiddleware(proxyConfig[context]));
      });
    }
  }
};

3. 修改angular.json，将build和serve的builder替换为custom-webpack：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 保留原有build配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 保留原有serve配置...
    }
  }
}

这种方案下，修改proxy.conf.js后会自动加载新的代理规则，无需重启开发服务器，适合需要频繁调整代理规则的场景。

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