如何在代理后面配置 Angular 4？答案

【问题标题】：How to configure Angular 4 behind Proxy?如何在代理后面配置 Angular 4？
【发布时间】：2018-03-19 23:08:08
【问题描述】：

我正在尝试在代理服务器后面使用 Angular 4 应用程序（我使用 zuul 作为代理服务器），因为我使用的是上下文路径路由，所以我已经使用上下文路径配置了 zuul 路由。下面是zuul路由配置。

kp-app1:
  path: /kp-app1/**
  retryable: true
  serviceId: kp-app1
  strip-prefix: false

由于 Angular 使用 baseurl=/ 运行，我手动编辑了 index.html 并添加了 /kp-app1/。经过大量使用wireshark分析数据包流的斗争后，我发现虽然index.html被正确检索，但在从客户端请求到代理时，其他资源（例如inline.bundle.js, main.bundle.js）没有前缀上下文路径，因为没有前缀，zuul 无法匹配 url 并将其转发给我的角度应用程序。最后，当我通过传递 base-href 和部署 url 来构建 Angular 应用程序时，尽管这些问题已得到解决。但是对于图像和 Font Awesome，我仍然遇到 404 错误。

ng build --base-href="//kp-app1" --deploy-url="//kp-app1"

关于分析 pcap 文件。我发现仍然有角度的客户端请求带有/assets/myimages.png 的图像，而不是以/kp-app1/assets/myimages.png 的有效请求为前缀，并且字体很棒，尽管它以/kp-app1 为前缀，但在两者之间没有添加正斜杠（/kp-app1fontawesome-webfont.af7ae505a9eed503f8b8.woff2）。因此对于图像和字体，zuul url match 不起作用，导致 404 错误

我还尝试使用 --base-href 和 --deploy-url 的不同组合进行构建，得到不同的 index.html

如果 url 是用/kp-app1 给出的，由于某种原因 angular-cli 正在附加 git 路径

  cmd: ng build --base-href="/kp-app1" --deploy-url="/kp-app1"
  output: <base href="C:/Program Files/Git/kp-app1/">
          <script type="text/javascript" src="C:/Program Files/Git/kp-app1/inline.bundle.js"></script> ...

如果url用/kp-app1/给出，效果同1。

如果 url 是用//kp-app1 给出的，当我配置它时，虽然它适用于 js 和 css 文件，但对于图像和 fontawesome 失败。

  cmd: ng build --base-href="//kp-app1" --deploy-url="//kp-app1"
  output: <base href="/kp-app1">
          <script type="text/javascript" src="/kp-app1/inline.bundle.js"></script> ...

如果 url 以 //kp-app1/ 给出。

  cmd: ng build --base-href="//kp-app1/" --deploy-url="//kp-app1/"
  output: <base href="//kp-app1/">
          <script type="text/javascript" src="//kp-app1/inline.bundle.js"></script> ...

【问题讨论】：

标签： angular webpack proxy angular-cli netflix-zuul

【解决方案1】：

好的，我终于解决了这个问题。以下是我所做的更改。

第一个错误我没有用/ 对网址进行后缀，即我使用/kp-app1 而不是/kp-app1/
图像没有被加载，因为我提供了如下所示的相对路径
```
<img src="../../assets/myimage.png">
```
当我更改它时，./ 图像开始加载。
```
<img src="./assets/myimage.png">
```
注意：在一些帖子中，我看到我们可以使用~ 而不是.，但不确定它是否有效，我没有尝试过。
当我在base-href 中添加/ 前缀时，最后附加C:/Program Files/Git/ 的问题似乎是带有gitbash 的角度cli 的problem。当我使用 windows cmd 时，它得到了整理。注意我省略了--deploy-url。我刚用过
```
ng build -bh /kp-app1/  
```

【讨论】：