如何使用Angular CLI同时运行多应用并实现路由分流？

嘿，我知道你现在的痛点：已经配置好多应用，单独跑完全没问题，但想同时启动还让不同路由对应不同应用对吧？你的脚本用了&&肯定不行——那是串行执行，得等第一个应用停了才会跑第二个，这就不是并行啦！我给你分步解决：

第一步：先让两个应用同时跑起来 #

推荐用跨平台工具（一次配置全系统通用） #

用concurrently这个包就能轻松实现跨平台并行执行命令，不用管是Windows还是Mac/Linux：

1. 先装依赖：

npm install concurrently --save-dev

2. 把你package.json里的脚本改成这样——重点是给每个应用指定不同端口，默认都是4200，会冲突的！

"scripts": {
  "develop-both": "concurrently \"ng serve --app 0 --port 4200 --proxy-config proxy.conf.json\" \"ng serve --app 1 --port 4201 --proxy-config proxy.conf.json\""
}

现在跑npm run develop-both，两个应用就会同时在4200和4201端口启动啦！

要是不想装包，也可以用系统原生命令 #

• Mac/Linux/WSL：用&把命令丢后台运行：

"develop-both": "ng serve --app 0 --port 4200 --proxy-config proxy.conf.json & ng serve --app 1 --port 4201 --proxy-config proxy.conf.json"

• Windows CMD：用start命令开新窗口跑：

"develop-both": "start ng serve --app 0 --port 4200 --proxy-config proxy.conf.json && start ng serve --app 1 --port 4201 --proxy-config proxy.conf.json"

• Windows PowerShell：用Start-Process：

"develop-both": "Start-Process ng -ArgumentList 'serve --app 0 --port 4200 --proxy-config proxy.conf.json'; Start-Process ng -ArgumentList 'serve --app 1 --port 4201 --proxy-config proxy.conf.json'"

第二步：让不同路由对应不同应用 #

现在两个应用各跑各的端口，接下来要实现比如http://localhost:8080/app0对应4200的应用，http://localhost:8080/app1对应4201的应用，给你两种常用方案：

方案1：改base-href + 轻量代理服务器 #

1. 先给每个应用启动时加上--base-href参数，不然路由跳转会乱：
   修改并行脚本：

"develop-both": "concurrently \"ng serve --app 0 --port 4200 --base-href /app0/ --proxy-config proxy.conf.json\" \"ng serve --app 1 --port 4201 --base-href /app1/ --proxy-config proxy.conf.json\""

2. 整个根代理配置文件（比如叫root-proxy.conf.json），用来把请求转发到对应端口：

{
  "/app0/*": {
    "target": "http://localhost:4200",
    "secure": false,
    "pathRewrite": {
      "^/app0": ""
    }
  },
  "/app1/*": {
    "target": "http://localhost:4201",
    "secure": false,
    "pathRewrite": {
      "^/app1": ""
    }
  }
}

3. 装个轻量HTTP服务器http-server来代理：

npm install http-server --save-dev

然后加个脚本：

"serve-root": "http-server -p 8080 -c-1 --proxy http://localhost:8080?"

现在先跑npm run develop-both，再跑npm run serve-root，访问http://localhost:8080/app0就会到第一个应用，/app1到第二个应用啦！

方案2：用Nginx反向代理（更稳定，适合生产或长期开发） #

如果你有Nginx的话，配置一下就行，示例配置如下：

server {
    listen 8080;
    server_name localhost;

    location /app0/ {
        proxy_pass http://localhost:4200/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /app1/ {
        proxy_pass http://localhost:4201/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

启动Nginx后，直接访问http://localhost:8080/app0和/app1就能对应到各自的应用了。

最后提几个注意点 #

• 绝对要给每个应用指定不同端口，不然会报端口占用错误；
• 应用里有路由跳转的话，必须配合--base-href，不然页面跳转就乱套了；
• 用concurrently的时候，按Ctrl+C就能一次性停掉所有应用进程，很方便。

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