如何为ng serve添加特定路由以提供Angular运行时配置JSON文件？

方案1：直接用Angular Assets托管静态配置 #

如果你的配置文件是静态的（不需要动态修改），这是最省事的办法：

• 把你的config.json扔到项目的src/assets文件夹里，Angular CLI默认会把assets目录的文件打包并托管
• 启动ng serve后，直接访问http://localhost:4200/assets/config.json就能拿到文件

要是不想用assets前缀，改下angular.json的assets配置就行：
打开angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> assets，加一段配置：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "config.json",
    "input": "src/",
    "output": "/"
  }
]

把config.json放在src根目录，启动服务后就能通过http://localhost:4200/config.json直接访问。

方案2：用Express写个简单的自定义开发服务器 #

如果配置需要动态生成（比如根据环境变量切换），可以搭个轻量的Express服务器，顺便代理ng serve的资源：

1. 先装依赖：npm install --save-dev express
2. 项目根目录建个dev-server.js：

const express = require('express');
const { spawn } = require('child_process');
const app = express();

// 自定义路由返回配置
app.get('/api/config', (req, res) => {
  res.json({
    apiUrl: process.env.API_URL || 'http://localhost:3000',
    env: 'development'
  });
});

// 启动ng serve
const ngServe = spawn('ng', ['serve']);

// 把ng serve的输出打到控制台
ngServe.stdout.on('data', data => console.log(data.toString()));
ngServe.stderr.on('data', data => console.error(data.toString()));

// 代理Angular的静态资源到ng serve的端口
app.use('/', (req, res) => {
  require('http').request({
    hostname: 'localhost',
    port: 4200,
    path: req.url,
    method: req.method,
    headers: req.headers
  }, proxyRes => {
    res.writeHead(proxyRes.statusCode, proxyRes.headers);
    proxyRes.pipe(res, { end: true });
  }).end();
});

// 监听4300端口，你也可以改成别的
app.listen(4300, () => {
  console.log('自定义开发服务器跑在 http://localhost:4300');
});

3. 在package.json的scripts里加一行：

"scripts": {
  "start:dev": "node dev-server.js"
}

运行npm run start:dev，访问http://localhost:4300/api/config就能拿到动态配置，同时正常访问Angular应用。

方案3：用webpack-dev-server的钩子加路由 #

如果项目用了自定义webpack配置，可以直接在devServer的before钩子加路由：

1. 项目根目录建webpack-dev-config.js：

module.exports = {
  devServer: {
    before: (app) => {
      app.get('/config.json', (req, res) => {
        res.json({
          appEnv: 'dev',
          featureFlags: {
            newUI: true
          }
        });
      });
    }
  }
};

2. 修改angular.json里的serve配置，指定这个webpack文件：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "你的项目名:build",
      "extraWebpackConfig": "webpack-dev-config.js"
    }
  }
}

启动ng serve后，访问http://localhost:4200/config.json就能拿到配置。

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