Search code examples
cssangularnginxfontsstatic-files

Angular assets static files not found

Problem: Resolving fonts which are inside assets folder results 404 Not Found error. http://server.com/assets/fonts/Bold/RobotoCondensed-Bold.woff2

It work though on local development: http://localhost/assets/fonts/Bold/RobotoCondensed-Bold.woff2

Details: I have got some fonts which are inside assets folder. They are correctly copied to docker image path: /usr/share/nginx/html/assets/fonts/Bold/RobotoCondensed-Bold.woff2

If I request http://server.com/service/assets/fonts/Bold/RobotoCondensed-Bold.woff2 then my font is retrieved. /service prefix is example name of which service is served.

Base href changes on local dev from <base href="/"> to <base href="/service/"> on server.com

How should I fix this problem. I could try changing url from /assets/fonts/Light/RobotoCondensed-Light.woff to service/assets/fonts/Light/RobotoCondensed-Light.woff but during local development this prefix does not exist so i my fonts would stop working on local environment.

Also I want to mention that my favicon.ico is correctly served. On local environment front asks without prefix and on server it requests favicon with prefix /service. Favicon is only mentioned inside index.html:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

_fonts.scss file:

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/assets/fonts/Light/RobotoCondensed-Light.woff2') format('woff2'),
        url('/assets/fonts/Light/RobotoCondensed-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

angular.json file:

"assets": [
    "projects/service/src/favicon.ico",
    "projects/service/src/assets"
],
"styles": [
    "projects/service/src/assets/scss/modules/_fonts.scss"
],

I am pretty new to angular and frontend and cannot solve this issue. Any help very appreciated.

Solution

  • I needed to use relative path in my urls ex.

    ./assets/fonts/Light/RobotoCondensed-Light.woff