无法从部署在 Apache 服务器上的 angular 应用程序加载文件 [英] Cannot load files from angular app deployed on Apache server

问题描述

我想创建一个在 Apache 服务器上运行的 Angular 应用程序.在本地从 npm start 运行良好，但从远程 Apache 部署中丢失了许多文件.我尝试将文件夹src/assets/....下的字体和i18n文件配置到angular.json:

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 加载资源失败:服务器响应状态为 404(未找到)

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

所以在研究之后看起来我必须使用这个添加映射:https://www.thewebflash.com/set-the-correct-mime-types-for-woff-fonts-in-your-web-server/ 但它不起作用.我还尝试添加此配置:https://gist.github.com/vmilev/cf8ef05c2d77fc52aed7d77fc8aedd6c5831d724a77>

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 文件

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

推荐答案

只需要在styles.css中url前添加斜杠即可.从此改变

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

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

到这里

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

这篇关于无法从部署在 Apache 服务器上的 angular 应用程序加载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！