部署在 apache 服务器上的 Angular 13 应用程序在刷新时抛出 404 错误

Question

我创建了一个原型 Web 应用程序，需要部署在 ubuntu 操作系统上的 apache 服务器上。 我已经构建了我的网络应用程序并托管在本地计算机上以运行测试。 我已启用设置 .htaccess，

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]  
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

现在，我的屏幕网址看起来像，

http://localhost/PROJECT-NAME/user/31/case/99

这样的URL正在从

index.php

中可用的另一个链接重定向，一旦角度页面加载，一切都很好，当我刷新浏览器时，它会给我一个

404 Error 

可用环境是，

Angular CLI: 13.3.3
Node: 14.17.4
Package Manager: npm 8.7.0
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1303.3 (cli-only)
@angular-devkit/core         13.3.3 (cli-only)
@angular-devkit/schematics   13.3.3 (cli-only)
@schematics/angular          13.3.3 (cli-only)

有人可以在这里帮助我吗，到目前为止我尝试了各种 .htaccess 和技术..

如果需要更多输入，请告诉我，将不胜感激您的帮助。

Answer 1

所描述的问题听起来像是您没有使用正确的重写规则，并且 Apache 无法正确处理请求。这就是为什么如果您尝试直接访问漂亮的 URL 则不起作用的原因。 （当您通过主页导航子页面时，URL 可以正常工作，因为它很可能是 SPA）。请尝试在您的 .htaccess 文件中使用以下重写规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Answer 2

您应该将其添加到app.module：

{ provide: LocationStrategy, useClass: HashLocationStrategy }

Answer 3

我在

PathLocationStrategy

遇到了同样的问题。对我有用的解决方案：

1. 在 Angular 应用程序（src 文件夹）中创建

   .htaccess

   文件。您可以在此资源上生成其内容：https://julianpoemp.github.io/ngx-htaccess-generator/
2. 将

   .htaccess

   文件添加到

   angular.json

   文件中的资产中（架构师 -> 构建 -> 选项 -> 资产，架构师 -> 测试 -> 选项 -> 资产也是如此）：

"assets": [
        "src/favicon.ico",
        "src/assets",
        "src/fonts",
        {
                "glob": ".htaccess",
                "input": "src",
                "output": "/"
        }
],

3. 现在重要的部分是配置 Apache 服务器本身，以允许应用程序覆盖

   .htaccess

   文件。为此，请在 Apache 服务器上找到您的

   apache2.config

   文件。就我而言，它位于

   /etc/apache2

   文件夹中（应通过 root 访问，因此在去那里之前运行

   sudo -i

   命令）。
4. 在

   Directory /var/www/

   文件中找到以下

   apache2.config

   部分：

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

并将行

AllowOverride None

更改为

AllowOverride All

。

5. 不要忘记构建和部署你的 Angular 应用程序并仔细检查/确保

   .htaccess

   文件包含在你的发行版中（它可能被你的操作系统隐藏，所以如果你手动部署它 - 确保它是可见的并且添加到 .zip 存档中），然后重新启动 Apache 服务器。就我而言，我通过运行以下命令重新启动 Apache 服务器：

   sudo service apache2 restart

   。

如果对此方法有任何疑问、意见或问题，请随时告诉我。