I have updated angular version from 8 to 13, everything is working properly. But only during first time load its giving 505 error to some font files

Question

I have updated angular version from 8 to 13, everything is working properly. But only during first time load its giving 505 error to some font files

Code Snippet Of index.html:

<base href="/">
....
....

Code Snippet Of master.css:

/* Font */
@font-face{font-family:'ClearSans-Medium';src:url(../fonts/ClearSans/ClearSans-Medium.eot);src:url(../fonts/ClearSans/ClearSans-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/ClearSans/ClearSans-Medium.woff2) format("woff2"), url(../fonts/ClearSans/ClearSans-Medium.woff) format("woff"), url(../fonts/ClearSans/ClearSans-Medium.ttf) format("truetype");font-weight:500;font-style:normal}
@font-face{font-family:'ClearSans-Regular';src:url(../fonts/ClearSans/ClearSans.eot);src:url(../fonts/ClearSans/ClearSans.eot?#iefix) format("embedded-opentype"), url(../fonts/ClearSans/ClearSans.woff2) format("woff2"), url(../fonts/ClearSans/ClearSans.woff) format("woff"), url(../fonts/ClearSans/ClearSans.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'ClearSans-Light';src:url(../fonts/ClearSans/ClearSans-Light.eot);src:url(../fonts/ClearSans/ClearSans-Light.eot?#iefix) format("embedded-opentype"), url(../fonts/ClearSans/ClearSans-Light.woff2) format("woff2"), url(../fonts/ClearSans/ClearSans-Light.woff) format("woff"), url(../fonts/ClearSans/ClearSans-Light.ttf) format("truetype");font-weight:300;font-style:normal}
@font-face{font-family:'ClearSans-Bold';src:url(../fonts/ClearSans/ClearSans-Bold.eot);src:url(../fonts/ClearSans/ClearSans-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/ClearSans/ClearSans-Bold.woff2) format("woff2"), url(../fonts/ClearSans/ClearSans-Bold.woff) format("woff"), url(../fonts/ClearSans/ClearSans-Bold.ttf) format("truetype");font-weight:700;font-style:normal}
body{font-family:'ClearSans-Regular';color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:18px;line-height:normal}

.htaccess code:

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Build Done with:

Angular CLI: 13.0.4
Node: 16.13.1
Package Manager: npm 8.1.2 

During first-time application load, Its showing "net::ERR_ABORTED 500 (Internal Server Error)" console errors for these fonts. All font files are present at the given path. Also working properly, but its showing errors in console.

Please suggest me the changes for this issue.

Answer 1

Looks like angular failed to load the resources first time around. Have you imported the fonts anywhere? Import the fonts folder to angular.json in assets: [].

Ofcourse check that the path is actually relevant to your files.

"assets": [
              "src/fonts
           ]