[英]How to configure Angular 4 behind Proxy?
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. 我正在尝试在代理服务器后面使用angular 4应用程序(我正在使用zuul作为代理服务器),因为我使用的是上下文路径路由,所以我已经使用上下文路径配置了zuul路由。 Below is the zuul routes configuration.
下面是zuul路由配置。
kp-app1:
path: /kp-app1/**
retryable: true
serviceId: kp-app1
strip-prefix: false
Since Angular runs with baseurl=/
I manually edited index.html and added /kp-app1/
. 由于Angular使用
baseurl=/
运行, baseurl=/
我手动编辑了index.html并添加了/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. 经过使用Wireshark分析数据包流的大量工作之后,我发现尽管可以正确检索
index.html
其余资源(例如inline.bundle.js, main.bundle.js
从以下位置请求时inline.bundle.js, main.bundle.js
却没有前缀上下文路径客户端代理,因为没有前缀,zuul无法匹配url并将其转发给我的有角度的应用程序。 Finally when I build Angular application by passing base-href and deploy url though these issues are fixed. 最后,当我通过传递base-href构建Angular应用程序并部署url时,这些问题已解决。 However still for images and Font Awesome I'm getting 404 error.
但是仍然对于图像和超赞字体,我收到404错误。
ng build --base-href="//kp-app1" --deploy-url="//kp-app1"
On analyzing pcap file. 关于分析pcap文件。 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
). 我发现仍然有角度的客户
/kp-app1/assets/myimages.png
在请求使用/assets/myimages.png
图像,而不是使用/kp-app1/assets/myimages.png
有效请求作为前缀,并且对于字体来说很棒,尽管它是/ kp-app1的前缀,但未在其中添加正斜杠之间( /kp-app1fontawesome-webfont.af7ae505a9eed503f8b8.woff2
)之间。 Hence for images and font awesome zuul url match does not work, resulting in 404 error 因此,对于图片和字体,很棒的zuul url匹配不起作用,导致404错误
And also I tried to build with different combination of --base-href and --deploy-url and I get different index.html 而且我尝试使用--base-href和--deploy-url的不同组合进行构建,并且得到了不同的index.html
if url is given with /kp-app1
, for some reason angular-cli is appending git path 如果url是用
/kp-app1
,则由于某种原因angular-cli会附加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/
, effect would be same as 1. /kp-app1/
,效果将与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. 如果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> ...
if url is given with //kp-app1/
. 如果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> ...
Ok, Finally I solved the issue. 好的,终于我解决了这个问题。 Below are the changes I made.
以下是我所做的更改。
/
that is I was using /kp-app1
instead of /kp-app1/
/
那是我用/kp-app1
代替/kp-app1/
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. ,不确定是否有效,但我没有尝试过。
Finally problem of appending C:/Program Files/Git/
when I prefix /
in base-href
it seems its a problem with angular cli with gitbash
. 追加的最后问题
C:/Program Files/Git/
当我前缀/
中base-href
似乎它的一个问题与角CLI gitbash
。 When I used windows cmd it got sorted out. 当我使用Windows cmd时,它已经整理好了。 Note I omitted
--deploy-url
. 注意我省略了
--deploy-url
。 I just used 我刚用过
ng build -bh /kp-app1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.