Angular CLI - ng 服务于单独的后端服务器答案

【问题标题】：Angular CLI - ng serve with seperate backend serverAngular CLI - ng 服务于单独的后端服务器
【发布时间】：2019-12-15 13:48:44
【问题描述】：

我正在将自定义 webpack 构建的 Angular 应用程序转换为 Angular CLI，一切似乎都运行良好，但我不知道如何让 ng serve 工作。我在这个 Angular 工作空间中有大约 11 个应用程序，一个主应用程序与其他应用程序通信，例如登录应用程序。运行 ng serve main 起初工作正常，应用程序启动，但随后立即重定向到 localhost:4200/login 以进行身份验证，但问题是我的 IIS 应用程序在 localhost:9000 上运行，因此当它尝试获取登录应用程序时一个错误Cannot GET /login。

我的问题是：如何设置 ng serve 以使用所有这些应用程序？

所有源代码都已构建到 dist 文件夹，因此 /dist/login 已准备好提供服务。我尝试了 serve 命令的各种参数，并尝试从我的 IIS 服务器使用的同一端口提供服务，但在这种情况下，我得到了 EACCES: permission denied 错误。我在 IIS 方面不是最有经验的人，但如果可以在该领域解决问题，我可以从高级开发人员那里获得帮助。

lite-server 可以解决这个问题吗？

真的任何输入都会有所帮助，我什至不知道在哪里看。谢谢！

【问题讨论】：

标签： angular angular-cli webpack-dev-server lite-server

【解决方案1】：

在尝试了 lite-server 并阅读了更多文档后，我偶然发现了proxying to a backend server。此配置选项允许您为发往另一个端口上的后端服务器的任何请求设置代理，并将它们转发到正确的地址。

只需设置一个proxy.conf.json 文件，告诉 webpack-dev-server 将流量重定向到哪里：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

然后在您的angular.json 中设置服务选项以查找您的代理文件：

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

对外部文件的请求现在将正确路由到在端口 3000 上运行的后端服务器！

【讨论】：