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"
}
}
],
...
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 !
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With