刷新后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构建我的角度项目，然后将其上传到我的Web服务器时，才会出现此问题.许多人说您应该使用hash方法，但是我不希望在我的url中显示哈希，这是一个非常古老的方法.有人还说我应该在我的<head>中更改我的<base>标记，但这没有用.
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中的<head>标签，如果有帮助的话.
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.
总而言之，每当我刷新页面或手动在角度站点的搜索栏中导航时，它都会显示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>
.刷新浏览器时，带有Angular 4的Net Core出现404错误
这篇关于刷新后Angular 6项目显示404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
