Server Configuration

This section covers changes you may have to make to the server or to files deployed on the server.

To view the original content please navigate to https://angular.io/guide/deployment#server-configuration.

Routed apps must fallback to index.html

Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side.

If the app uses the Angular router, you must configure the server to return the application's host page (index.html) when asked for a file that it does not have.

A routed application should support "deep links". A deep link is a URL that specifies a path to a component inside the app. For example, http://www.mysite.com/heroes/42 is a deep link to the hero detail page that displays the hero with id: 42.

There is no issue when the user navigates to that URL from within a running client. The Angular router interprets the URL and routes to that page and hero.

But clicking a link in an email, entering it in the browser address bar, or merely refreshing the browser while on the hero detail page — all of these actions are handled by the browser itself, outside the running application. The browser makes a direct request to the server for that URL, bypassing the router.

A static server routinely returns index.html when it receives a request for http://www.mysite.com/. But it rejects http://www.mysite.com/heroes/42 and returns a 404 - Not Found error unless it is configured to return index.html instead.

Fallback configuration examples

There is no single configuration that works for every server. The following sections describe configurations for some of the most popular servers. The list is by no means exhaustive but should provide you with a good starting point.

Apache

• Apache: add a rewrite rule to the .htaccess file as shown (https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-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

Nginx

• Nginx: use try_files, as described in Front Controller Pattern Web Apps, modified to serve index.html:

try_files $uri $uri/ /index.html;

Ruby

• Ruby: create a Ruby server using (sinatra) with a basic Ruby file that configures the server server.rb:

require 'sinatra'

# Folder structure
# .
# -- server.rb
# -- public
#    |-- dist
#        |-- index.html

get '/' do
    folderDir = settings.public_folder + '/dist'  # ng build output folder
    send_file File.join(folderDir, 'index.html')
end

IIS

• IIS: add a rewrite rule to web.config, similar to the one shown here:
  *Don't forget to install IIS URL Rewrite on server.

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular 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="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

• Example web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
                <add value="Default.htm" />
                <add value="Default.asp" />
                <add value="index.htm" />
                <add value="iisstart.htm" />
                <add value="default.aspx" />
            </files>
        </defaultDocument>
  	<rewrite>
	    <rules>
	      <rule name="Angular 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="/index.html" />
	      </rule>
	    </rules>
	</rewrite>
    </system.webServer>
</configuration>