如何在代理后面配置Angular 4? [英] How to configure Angular 4 behind Proxy?

问题描述

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

I'm trying to use angular 4 application behind a proxy server (I'm using zuul as proxy server), since I'm using context path routing, I've configured zuul routes with context path. Below is the zuul routes configuration.

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来构建Angular应用程序并部署url时，尽管这些问题已解决.但是，对于图像和真棒字体"，我仍然收到404错误.

Since Angular runs with baseurl=/ I manually edited index.html and added /kp-app1/. After much of struggle analyzing packets flow using wireshark, I figured out that though index.html is retrieved properly rest of the resources such as inline.bundle.js, main.bundle.js did not had the context-path prefixed, when requesting from client to proxy, since there was no prefix, zuul was not able to match url and forward it my angular application. Finally when I build Angular application by passing base-href and deploy url though these issues are fixed. However still for images and Font Awesome I'm getting 404 error.

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匹配不起作用，导致404错误

On analyzing pcap file. I find still angular client is requesting images with /assets/myimages.png instead of prefixing with effective request as /kp-app1/assets/myimages.png and for font awesome though it is prefixing /kp-app1 but not adding forward slash in between(/kp-app1fontawesome-webfont.af7ae505a9eed503f8b8.woff2). Hence for images and font awesome zuul url match does not work, resulting in 404 error

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

And also I tried to build with different combination of --base-href and --deploy-url and I get different index.html

1. 如果使用/kp-app1给出了url，则出于某些原因angular-cli会附加git path

1. if url is given with /kp-app1, for some reason angular-cli is appending git path

  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> ...

如果使用/kp-app1/给出url，效果将与1相同.

如果使用//kp-app1给出了url，则当我对其进行配置时，虽然它适用于js和css文件，但不适用于图像和fontawesome.

if url is given with /kp-app1/, effect would be same as 1.

if url is given with //kp-app1, When I configure this though it works for js and css file but fails for images and 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> ...

如果使用//kp-app1/给出了网址.

if url is given with //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> ...

推荐答案

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

Ok, Finally I solved the issue. Below are the changes I made.

1. 第一个错误是我没有使用/将URL后缀，即我使用的是/kp-app1而不是/kp-app1/

2. 图像未加载，因为我提供了如下所示的相对路径

1. First mistake I was not postfixing the url with / that is I was using /kp-app1 instead of /kp-app1/

2. Image was not getting loaded as I was providing relative path in as shown below

<img src="../../assets/myimage.png">

当我更改它时，./图像开始加载.

when I changed it ./ images started getting loaded.

<img src="./assets/myimage.png">

注意::在某些帖子中，我看到我们可以使用~代替.，不确定我没有尝试过.

Note: In some post I see we can use ~ instead of ., not sure it works I've not tried.

当我在base-href中添加/前缀时，最后出现添加C:/Program Files/Git/的问题，它似乎是问题，角度为cli且为gitbash.当我使用Windows cmd时，它已经整理好了.注意我省略了--deploy-url.我只是用

Finally problem of appending C:/Program Files/Git/ when I prefix / in base-href it seems its a problem with angular cli with gitbash. When I used windows cmd it got sorted out. Note I omitted --deploy-url. I just used

ng build -bh /kp-app1/  

这篇关于如何在代理后面配置Angular 4?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！