Cannot load files from angular app deployed on Apache server

Question

I want to create an Angular app which is run on Apache server. Locally from npm start it's running well but from remote Apache deployment many files are missing. I tried to configure fonts and i18n files under the folder src/assets/.... into angular.json:

            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],

But when I run the web page I get errors like:

633328.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
materialdesignicons-webfont14e6.woff2:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fontawesome-webfont3295.woff2:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fontawesome-webfont3295.woff:1 Failed to load resource: the server responded with a status of 404 (Not Found)
materialdesignicons-webfont14e6.woff:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fontawesome-webfont3295.ttf:1 Failed to load resource: the server responded with a status of 404 (Not Found)
materialdesignicons-webfont14e6.ttf:

1 Failed to load resource: the server responded with a status of 404 (Not Found)

So after research looks like I have to add mapping using this: https://www.thewebflash.com/set-the-correct-mime-types-for-woff-fonts-in-your-web-server/ but it's not working. I also tried to add this configuration: https://gist.github.com/vmilev/cf8ef05c2d77fc8aedd6c5831d724a77

But again no luck. Can you give me some idea how this can be fixed?

.htaccess file

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

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /angular/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

AddType font/woff .woff
AddType font/woff2 .woff2

Could it be that you redirect all URLs to index.html regardless of whether the file exists or not? You should have a RewriteCond that checks for -f (files) or -d (directories). Could you post your relevant Apache config? — Robin De Schepper
– Robin De Schepper, Commented Apr 7, 2020 at 1:20
I use the default apache config with added .htaccess file. See the updated port. — Peter Penzov
– Peter Penzov, Commented Apr 7, 2020 at 8:44
Your .htaccess doesn't look very correct. You should correctly go to files or directories atleast, but then you rewrite to index.html, AND add a whole new rewrite block? In that block you always RewriteBase and always rewrite to index.html, you stop there because of [L] and then there's more unreachable rewrites. Maybe the 2nd RewriteEngine On removes previous rules and that causes the strange behavior? — Robin De Schepper
– Robin De Schepper, Commented Apr 10, 2020 at 13:00

Albert Allagulov · Accepted Answer · 2020-04-07 12:18:56Z

1

just add slash in styles.css before urls. Change from this

angular/assets/fonts/glyphicons-halflings-regular.eot

to this

/angular/assets/fonts/glyphicons-halflings-regular.eot

answered Apr 7, 2020 at 12:18

Albert Allagulov

1557 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Penzov Over a year ago

Thanks. So far so good but now I get `Failed to decode downloaded font: 123.123.134.123/angular/angular/assets/fonts/…

Collectives™ on Stack Overflow

Cannot load files from angular app deployed on Apache server

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related