Angular 6 项目刷新后显示 404 错误 [英] Angular 6 project displays 404 error after refresh
问题描述
刷新我的角度页面给我一个 404 服务器错误，如果我手动导航到搜索栏中的目录，它也会出现同样的错误.我通过 IIS 服务器托管.
Refreshing my angular page gives me a 404 server error, it does the same if I manually navigate to directory in the search bar. I am hosting through an IIS Server.
只有当我使用 ng build --prod 构建我的 angular 项目然后将其上传到我的 Web 服务器时，才会出现此问题.很多人说你应该使用散列方法，但我不希望在我的 url 中显示散列，这是一种非常古老的方法.有些人还说我应该更改 中的
This problem only occurs whenever I build my angular project with ng build --prod and then upload it to my web server. Many people say you should use the hash method, but I don't want a hash to be displayed inside my url, and it's a very old method. Some people also say I should change my <base> tag in my <head>, but that hasn't worked.
这是我的 index.html 中的 标记，如果有帮助的话.
Here's my <head> tag from my index.html if it is helpful.
<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 与我定义的任何路径都不匹配，该组件就会显示出来.但它没有显示出来.
I also use a component which gets displayed if the entered URL doesn't match any of my defined paths. But it doesn't get displayed.
总而言之，每当我刷新页面或在我的 Angular 站点的搜索栏中手动导航时，它都会显示 404 服务器错误页面.而且我不想使用哈希方法.
So to summarize, whenever I refresh my page or manually navigate in the search bar on my angular site, it displays a 404 Server Error page. And I don't want to use the hash method.
推荐答案
您可以通过创建 web.config 文件来解决此问题:
You can resolve this by creating a web.config file:
<?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 错误
这篇关于Angular 6 项目刷新后显示 404 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
