Not able to find images and files

Question

My Angular application is served by Play server. The application can't find images and fonts I have added in the component when I build the application and run it.

The images are accessed in the component.html as follows

<div id="nav" class="nav-style nav-flexbox-container">
    <img id="stats-icon-pic" src="assets/images/StatsIcon.png">
    <img id="mail-icon-pic" src="assets/images/MailIcon.png">
    <img id="profile-pic" src="assets/images/ExampleProfilePic.png">
  </div>

The fonts are used as

@font-face{
  font-family:"solway-bold";
  src:url(../../assets/fonts/solway/fonts/Solway-Bold.ttf);
}

the images and fonts are in the assets folder in Angular application

When I build the application, I use the public folder of Play as output directory.

"build": "ng build --output-path ../public/ui",

I am facing two issues

1) The application can't find the images and fonts

I see the following error message on my Play application

[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/ExampleLogo.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/MailIcon.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/ExampleProfilePic.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/StatsIcon.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /Solway-ExtraBold.ttf, statusCode: 404, message:
[trace] u.CustomHttpErrorHandler - client error: request GET /Solway-Light.ttf, statusCode: 404, message:

I changed the path of images in src to ui/assets/images/StatsIcon.png but still get error client error: request GET /ui/assets/images/StatsIcon.png, statusCode: 404, message:

2) the font files are copied both in the ui/assets/fonts/... folder as well as the top level ui/assets/ folder. Why?

Answer 1

The problem was not due to Angular but due to my incorrect usage in play framework. Play has a route rule

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

The above means that all the requests for resources with path /assets/abc/def should be taken from the folder /public/abc/def. In my case the resources are at /public/ui/assets/images. So I had to change thesrcin the Angularhtmlto. This makes requests with pathassets/ui/assets/images/example-logo.pngwhich gets mapped to the pathpublic/ui/assets/images/example-logo.png`