How to configure Angular 4 behind Proxy?

Question

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

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

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

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

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

Answer 1

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

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.

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