Angular 6 项目刷新后显示 404 错误
Posted
技术标签:
【中文标题】Angular 6 项目刷新后显示 404 错误【英文标题】：Angular 6 project displays 404 error after refresh 【发布时间】：2019-06-26 02:30:33 【问题描述】：刷新我的 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 【参考方案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>
【讨论】：
以上是关于Angular 6 项目刷新后显示 404 错误的主要内容，如果未能解决你的问题，请参考以下文章
在 Tomcat 中刷新后出现 Angular 404 错误
Angular 2：当我通过浏览器刷新时出现 404 错误[重复]