Angular 6 项目刷新后显示 404 错误答案

【问题标题】：Angular 6 project displays 404 error after refreshAngular 6 项目刷新后显示 404 错误
【发布时间】：2023-03-17 21:42:01
【问题描述】：

刷新我的 Angular 页面会给我一个 404 服务器错误，如果我手动导航到搜索栏中的目录，它也会出现同样的情况。我通过 IIS 服务器进行托管。

仅当我使用 ng build --prod 构建我的 Angular 项目然后将其上传到我的 Web 服务器时才会出现此问题。很多人说你应该使用 hash 方法，但我不希望在我的 url 中显示 hash，这是一种非常古老的方法。有些人还说我应该在我的<head> 中更改我的<base> 标签，但这没有奏效。

如果有帮助，这是我的 index.html 中的 <head> 标签。

<head>
<!-- META DATA -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- APP -->
<title>SebastianElstadt</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="assets/images/app-icon.png">

<!-- STYLES -->
<link rel="stylesheet" href="[fontawesome cdn]">
</head>

我还使用了一个组件，如果输入的 URL 与我定义的任何路径都不匹配，该组件就会显示出来。但它没有显示出来。

总而言之，每当我刷新页面或在 Angular 网站的搜索栏中手动导航时，它都会显示 404 服务器错误页面。而且我不想使用哈希方法。

【问题讨论】：

“旧”并不意味着“坏”。作为初学者，我宁愿在我的 URL 中看到一个散列，也不愿重新配置我的服务器。但要回答你，这是一个 HTTP 服务器问题，而不是 Angular 问题。您应该使用正确的标签来识别您的服务器，否则您将无法得到适当的答案。
你需要使用Path Location Strategy

标签： javascript html angular angular6

【解决方案1】：

我不知道您使用哪个服务器，但如果您不想使用哈希方法，则必须将每个请求重定向到运行 angular-app 的 index.html。

如果服务器找不到路由 /your/sub/route 并说“404 not found”。

【讨论】：

【解决方案2】：

您应该查看 https://angular.io/guide/deployment 以部署 Angular 应用程序。它需要根据您的 http 服务器进行一定的配置。因此，例如对于 Apache，您需要在项目根目录中添加以下 .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

【讨论】：

我按照为我的 IIS 服务器设置 web.config 文件的步骤操作，但现在每当我导航到我的网站时，它只会显示 500 - Internal Server Error
@Sebastian 那么您的 web.config 文件中可能有错误。我不知道您的配置是什么，以及您是如何构建服务器环境的，因此除非您分享更多相关信息，否则很难分辨。

【解决方案3】：

您可以通过创建 web.config 文件来解决此问题：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <defaultDocument>
        <files>
            <clear />
            <add value="index.html" />
        </files>
    </defaultDocument>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />   
          </conditions>
          <action type="Rewrite" url="/" logRewrittenUrl="true" />
        </rule>
      </rules>
    </rewrite>
 <security>
        <requestFiltering allowDoubleEscaping="true">
            <fileExtensions>
                <add fileExtension=".json" allowed="true" />
            </fileExtensions>
        </requestFiltering>
</security>
    <directoryBrowse enabled="true" />
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
</configuration>

.Net Core with Angular 4 : 404 error when I refresh the browser

【讨论】：

我只是想确定一下，我是想在该代码中到处更改内容还是直接复制？
您可以按原样使用它。也可以使用 IIS 自动生成此文件。
我添加了web配置文件的header，所以你可以直接使用它。
谢谢，但是每当我添加 web.config 文件并添加此代码时，它都会加载 500 -Internal server error
值得一提的是，此解决方案需要在您的 IIS 上安装“重写模块”。您可以 google 或使用“网络平台安装程序”工具。

【解决方案4】：

这将解决您的问题，将 .htaccess 文件添加到项目的根目录

并把这个内容

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
</IfModule>

RewriteEngine On

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
</IfModule>

【讨论】：