Angular 5 fix relative path for Assets/ folder

Question

I am working on an Angular 5 app, I am hosting it on a Apache2.4 http server redirecting it with a proxy module on http://localhost:7777/test/

My first issue was when calling a service from the browser, it was using http://localhost:7777/ as base URL, quickly resolved by removing the slash from my test service, /service1/upload to service1/upload. So I went from http://localhost:7777/service1/upload to http://localhost:7777/test/service1/upload.

Now I am having an other unfixed issue with an image.png from the Assets/ folder, it keeps trying to get it from http://localhost:7777/assets/image.png instead of http://localhost:7777/test/assets/image.png

I tested the second URL, it returns my image as asked. How can I make Angular 5 to find my assets path relatively? In my case having a call on http://localhost:7777/test/assets/image.png

Here's how I access to the image in HTML :

..
<img  src='assets/stop_pic.PNG' > 
..

My base href in my index.html :

<base href="">

My angular-cli.json conf :

...    
apps": [
        {
          "root": "src",
          "outDir": "../src/main/resources/static",
          "assets": [
            "assets"
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [
            "styles.css"
          ],
          "scripts": [],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
    ...

Greer

Answer 1

Got the answer, even if it is a bit stupid.. The browser cached my app so it didn't take in count my last modifications going from <img src='../../assets/stop_pic.PNG'> to <img src='assets/stop_pic.PNG'> . removing all slashes from my images src worked !

Greer

Answer 2

Set your base href in your index.html like -

<base href='/'>

Change -

 "assets": [
            "assets"
          ],

TO -

 "assets": [
             "src/assets"
          ],

Refer image in your HTML like :

src="/assets/images/footer-min.png"

Dutiful

Already tried, it does not work, I do not even get to my application. The browser is only able to get the index.html without all the .JS files – Greer

have you configures your resources in angular.json – Dutiful

check this - #51279221 – Dutiful

I will putting my assets folder into my src/ folder – Greer

Try to change your assest config as mentioned – Dutiful