Question

我正在尝试在代理服务器后面使用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但不在它们之间添加正斜杠（{{1} }）。因此对于图像和字体很棒的zuul url匹配不起作用，导致404错误

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

如果网址是/kp-app1fontawesome-webfont.af7ae505a9eed503f8b8.woff2，由于某种原因，angular-cli会附加git路径
```
/kp-app1
```
如果网址为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> ...，则效果与1相同。
如果url与/kp-app1/一起给出，当我配置它虽然它适用于js和css文件但是对于图像和fontawesome失败。
```
//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> ...。
```
//kp-app1/
```

Answer 1

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

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

如何在代理服务器后面配置Angular 4？

1 个答案: