CODEWITHSUNDEEP
angularapacheamazon-ec2
Jon Deaton
Jon Deaton

Reputation: 4369

Angular Application only root path works on Apache Web Server

I am deploying an Angular 4 application on an EC2 instance. I compiled the application with ng build --prod and moved the contents of the dist directory to /var/www/html. Furthermore, I have started the web service daemon with sudo service httpd start. The webpage works except that I can only access routes via the main page.

For example I can get to:

http://my-page.com/dashboard

only by first visiting

http://my-page.com

and then clicking on the dashboard button. However, I cannot access this portion of the application directly by navigating to http://my-page.com/dachboard as was possible in the the angular development environment (Angular CLI server).

I would like to know if this is possible and how to achieve this. The steps that I have taken to try to resolve this are

  1. Enable mod_proxy by adding RewriteEnging On and adding ProxyPass * http://my-page.com/ and ProxyPassReverse * http://my-page.com/ to the httpd.conf file
  2. Try to add AllowOverride All to the httpd.conf file
  3. Configuring .htaccess to allow RewiteEngine.

Upvotes: 0

Views: 601

Answers (1)

Jon Deaton
Jon Deaton

Reputation: 4369

Take a look at this article describing how to deploy an Angular application on Apache. The steps you missed are adding:

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

to .htaccess and adding

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

to the <VirtualHost *:80> section of /etc/httpd/conf/httpd.conf file. That should do the trick.

Upvotes: 1

Related Questions