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

Issue

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.

Solution

I was also facing same problem, I solved it by adding following code in angular.json:

"configurations": {
  "production": {
      //other code
      "optimization": {
           "scripts": true,
           "styles": {
                "minify": true,
                "inlineCritical": false
           },
           "fonts": false
      }
  }
}

after adding above code, restart your application: npm start

Answered By - Rakesh Hiray