Angular 6 project displays 404 error after refresh

Question

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.

"Old" doesn't mean "Bad". As a beginner, I'd rather see a hash in my URL than have to re-configurate my server. But to answer you, this is an HTTP server issue, not an Angular issue. You should use the correct tags to identify your server, otherwise you won't get an appropriate answer. — , Feb 01 '19 at 13:50
You need to use [Path Location Strategy](https://angular.io/api/common/PathLocationStrategy) — MonkeyScript, Feb 01 '19 at 13:58

score 2 · Answer 1 · answered Feb 01 '19 at 13:47

2

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

answered Feb 01 '19 at 13:47

Rens

478
2
8
13

I followed the steps for setting up my web.config file for my IIS Server, but now whenever I navigate to my website, it just displays 500 - Internal Server Error – Feb 01 '19 at 14:17
@Sebastian then there is probably an error in your web.config file. I don't know what your configuration is and how you have structured your server environment so its hard to tell unless you share a bit more info about that. – Rens Feb 01 '19 at 14:33

mruanova · Accepted Answer · 2019-02-01T15:13:34.353

2

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

edited Feb 01 '19 at 15:13

answered Feb 01 '19 at 14:57

mruanova

6,351
6
37
55

1

I just want to make sure, am I suppose to change things here and there in that code or copy it directly? – Feb 01 '19 at 15:07
You can use it as is. Also it is possible to automatically generate this file by using IIS. – mruanova Feb 01 '19 at 15:08
I added the header for web config file so you can use it directly. – mruanova Feb 01 '19 at 15:09
1

Thanks, but whenever I add the web.config file and add this code, it loads 500 -Internal server error – Feb 01 '19 at 15:13
I am trying to deploy a single-page Angular 6 app to SharePoint and get the same issue as the original poster. I added the web.config file in the same directory as my index.html file. Any ideas what is wrong? – new_programmer_22 Aug 20 '19 at 17:04
if you are in a page like mywebsite/example/1 and hit refresh in the browser sometimes it doesn't hit the router and there is nothing in angular that you can do to fix it, but you can create a folder called 'example' and inside put another index.html with a simple javascript script that says ```window.location.href=http://mywebsite/index.html``` and that gives you an idea of what is happening and also a work around. – mruanova Aug 20 '19 at 18:38
1

It's worth remaining that this solution needs the "rewrite module" to be installed at your IIS. You can google for it or use the "web platform installer" tool. – JoeCool Dec 09 '19 at 14:29

score 0 · Answer 3 · answered Feb 01 '19 at 13:45

0

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".

answered Feb 01 '19 at 13:45

Gundelino85

49
3

score 0 · Answer 4 · answered Feb 19 '20 at 08:03

This will solve your problem, add .htaccess file to the root of your project

and put this content

<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 project displays 404 error after refresh

4 Answers4

Linked