Deploy Angular 2 to Apache Server

Question

I want to deploy an Angular 2 application on an Apache server. I've read various guides like this and this but none of them is working. I have npm and ng installed on the server.

In a nutshell, here's what I did:

Cloned complete project repository on my server.
Installed dependencies using npm install.
Used ng build --prod command and it created a dist directory.
Changed apache root to /var/www/html/dist directory.
Enabled mod_rewrite, restarted apache and added this .htaccess in my dist directory.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

But only my home page domain.com works, other pages like domain.com/login, domain.com/register etc. throw 404 error. Even domain.com/index.html/login doesn't work.

The application works fine on my local system where I'm developing it using ng serve. What am i missing?

score 23 · Answer 1 · edited Feb 02 '19 at 14:11

23

Create .htaccess file in the root folder and paste this in .htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

edited Feb 02 '19 at 14:11

Amarjit Singh

2,068
19
52

answered Mar 23 '18 at 17:10

Sumit Jaiswal

787
8
11

Works for me too with PHP-Slim on the backend and Angular 6 – Aug 31 '18 at 21:59
be sure that mod_rewrite is on `a2enmod rewrite && apache2 restart` – Pipo Nov 23 '18 at 17:19
I have the same issue but above solution not work for me – Pramod Jun 25 '19 at 08:34
@pramod what about your server..? – Sumit Jaiswal Jun 26 '19 at 09:05
@SumitJaiswal I am using tomcat for deployment – Pramod Jun 26 '19 at 10:00
@SumitJaiswal My login page load successfully but it gives 404 error msg when I clicked on the login button – Pramod Jun 26 '19 at 10:19
@SumitJaiswal where should I put file `.htaccess`. In `src`? or where? – swapy Aug 28 '19 at 10:14
sorry for late reply, that file should go at root of directory, for example you deployed /dist folder directly in root of server then you just need to put `.htaccess` file on root folder. – Sumit Jaiswal Apr 24 '20 at 06:03

score 18 · Accepted Answer · answered Mar 27 '17 at 04:49

18

It appears i was missing this in my /etc/apache2/sites-enabled/000-default.conf file. After adding this and restarting apache, website runs fine.

<Directory "/var/www/html/dist">
  AllowOverride All
</Directory>

answered Mar 27 '17 at 04:49

Kanav

2,695
8
34
56

1

not working for me. I generated dist with `ng-build` and deployed in apache server, – Sathish Kotha Jul 19 '17 at 12:55
Thanks. And this approach works for the linode cloud server. – Bharathiraja Aug 21 '18 at 17:30

score 8 · Answer 3 · answered Jul 16 '18 at 14:38

1) Change base tag in index.html file

<base href="./">

2) Build Project:

ng build --prod --base-href /myproject/

3) Add your dist files in "/usr/local/apache2/htdocs/myproject/"

4)On Apache Server 2.4 (httpd) In File: /usr/local/apache2/conf/httpd.conf setup "FallbackResource"

<Directory "/usr/local/apache2/htdocs">
   ...
   FallbackResource /myproject/index.html
</Directory>

full file "/usr/local/apache2/conf/httpd.conf":

ServerRoot "/usr/local/apache2"

Listen 80

LoadModule mpm_event_module modules/mod_mpm_event.so
LoadModule authn_file_module modules/mod_authn_file.so
LoadModule authn_core_module modules/mod_authn_core.so
LoadModule authz_host_module modules/mod_authz_host.so
LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
LoadModule authz_user_module modules/mod_authz_user.so
LoadModule authz_core_module modules/mod_authz_core.so
LoadModule access_compat_module modules/mod_access_compat.so
LoadModule auth_basic_module modules/mod_auth_basic.so
LoadModule reqtimeout_module modules/mod_reqtimeout.so
LoadModule filter_module modules/mod_filter.so
LoadModule mime_module modules/mod_mime.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule env_module modules/mod_env.so
LoadModule headers_module modules/mod_headers.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule version_module modules/mod_version.so

LoadModule unixd_module modules/mod_unixd.so
LoadModule status_module modules/mod_status.so
LoadModule autoindex_module modules/mod_autoindex.so

<IfModule !mpm_prefork_module>
    #LoadModule cgid_module modules/mod_cgid.so
</IfModule>
<IfModule mpm_prefork_module>
    #LoadModule cgi_module modules/mod_cgi.so
</IfModule>

LoadModule dir_module modules/mod_dir.so
LoadModule alias_module modules/mod_alias.so
LoadModule rewrite_module modules/mod_rewrite.so

<IfModule unixd_module>
User daemon
Group daemon

</IfModule>
ServerAdmin you@example.com

<Directory />
    AllowOverride none
    Require all denied
</Directory>

DocumentRoot "/usr/local/apache2/htdocs"
<Directory "/usr/local/apache2/htdocs">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
    FallbackResource /myproject/index.html
</Directory>

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

<Files ".ht*">
    Require all denied
</Files>

ErrorLog /proc/self/fd/2

LogLevel warn

<IfModule log_config_module>
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common

    <IfModule logio_module>
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>

    CustomLog /proc/self/fd/1 common

</IfModule>

<IfModule alias_module>

    ScriptAlias /cgi-bin/ "/usr/local/apache2/cgi-bin/"

</IfModule>

<IfModule cgid_module>
</IfModule>


<Directory "/usr/local/apache2/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>

<IfModule headers_module>
    RequestHeader unset Proxy early
</IfModule>

<IfModule mime_module>
    TypesConfig conf/mime.types

    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz

</IfModule>

<IfModule proxy_html_module>
Include conf/extra/proxy-html.conf
</IfModule>

<IfModule ssl_module>
SSLRandomSeed startup builtin
SSLRandomSeed connect builtin
</IfModule>

score 5 · Answer 4 · answered Jul 07 '17 at 06:17

5

Change base tag in index.html file

<base href="./">
Create a build after that

ng build --prod
Now you will have a new folder dist, deploy dist folder now. It should work.

answered Jul 07 '17 at 06:17

krunal shah

16,089
25
97
143

But why? Could you add an explanation? – Beginner Sep 20 '20 at 20:51

score 5 · Answer 5 · answered Feb 16 '18 at 20:51

For Apache, to redirect any request to index.html, you need a .htaccess file in the root. Just create a .htaccess in your dist folder (same level as index.html), I assume that's the public root of your app, and paste this in the .htaccess file:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

Now, no matter what path you're requesting, Apache will always serve your index.html file, except requests to actual existing files (RewriteCond %{REQUEST_FILENAME} !-f) and requests to css, js etc. (RewriteCond %{REQUEST_URI} !.(?:css|js|map|jpe?g|gif|png)$) - which needed to be excluded, because you actually want those. Also, the Apache's mod_rewrite extension needs to be enabled for this to work. Most often, it is enabled. If not, ask your hosting provider

score 3 · Answer 6 · answered Feb 07 '18 at 16:37

3

Change base tag in index.html file

Run:

ng build --prod -bh "http://example.net"

answered Feb 07 '18 at 16:37

Fernix

361
3
10

score 1 · Answer 7 · answered Jun 26 '17 at 03:06

1

open your index.html in dist directory after

ng build --prod

and Chang base element to your site DNS name for example for my local apache server I changed from

<base href="/">

to

<base href="//localhost/angular2/ng2-cli/dist/">

answered Jun 26 '17 at 03:06

Mohannd

1,288
21
20

score 1 · Answer 8 · answered May 13 '20 at 18:57

I have create distribution directory as public. I have changed only virtual host setting of apache.

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName frontend.loc
    DocumentRoot /var/www/frontend/public
    <Directory "/var/www/frontend/public/">
        Options FollowSymLinks
        Allow from all
        AllowOverride All
        <IfModule mod_rewrite.c>
                RewriteEngine on
                RewriteCond %{REQUEST_FILENAME} !-d
                RewriteCond %{REQUEST_FILENAME} !-f
                RewriteRule ^(.*)$ index.html
        </IfModule>
    </Directory>
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

~

Krish · Answer 9 · 2021-02-24T06:51:59.890

As per official Angular documentation for angular deployment (https://angular.io/guide/deployment)

A routed application should support "deep links".

We need to enable mod_rewrite module, there are various ways to do this. On an ubuntu machine we can run following commands:

sudo a2enmod rewrite
sudo systemctl restart apache2

we also need to allowoverride in configuration file so that .htaccess file can run:

  <Directory /var/www/>
  Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>

Then in .htaccess file, copy following lines for rewriting:

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

If it still doesn't work then best solution is check error log, in my case I solved the issue by checking logs where I find that mod_rewrite module was not installed so I had installed mod_rewrite manually and it worked.

Deploy Angular 2 to Apache Server

9 Answers9

Linked