Angular 6 project displays 404 error after refresh

问题

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.

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.

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>

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.

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.

回答1:

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 error when I refresh the browser

回答2:

I don't know which server you use, but if you don't want to use the hash-method each request must be redirected to your index.html where the angular-app is running.

If the server can not find the route /your/sub/route and says "404 not found".

回答3:

You should checkout https://angular.io/guide/deployment for deployment of the Angular app. It needs a certain configuration based on your http server. So for example for Apache you will need the following .htaccess file in your project root

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

来源：https://stackoverflow.com/questions/54480750/angular-6-project-displays-404-error-after-refresh

标签

javascript

html

angular

angular6