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

时间:2019-02-01 13:41:48

标签: javascript html angular angular6

刷新我的角度页面会给我404服务器错误,如果我手动导航到搜索栏中的目录,它也会执行相同的操作。我通过IIS服务器托管。

仅当我使用ng build --prod构建我的角度项目并将其上传到我的Web服务器时,才会出现此问题。许多人说您应该使用哈希方法,但是我不希望在我的URL中显示哈希,这是一个非常古老的方法。有人还说我应该在我的<base>中更改我的<head>标记,但这没有用。

这是我的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与我定义的任何路径都不匹配,该组件就会显示出来。但是不会显示。

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

4 个答案:

答案 0 :(得分:1)

您可以通过创建一个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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

您应签出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

答案 3 :(得分:0)

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

并放入此内容

class HomeController extends Controller
{
    public function index(UserRepository $userRepository)
    {
        return $userRepository->get();
        ...