angular webpack proxy angular-cli netflix-zuul

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. Below is the zuul routes configuration.

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

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

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

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

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

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

Solution

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

First mistake I was not postfixing the url with / that is I was using /kp-app1 instead of /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. When I used windows cmd it got sorted out. Note I omitted --deploy-url. I just used
```
ng build -bh /kp-app1/  
```