How to Deploy Angular on Apache Remote Server Example – Use Vultr Hosting


In the tutorial, We show how to deploy Angular Client with Production mode on Apache Remote Server with Vultr Hosting.

Related post:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically


– Vultr Hosting
– Apache Server
– Angular


Video Guide


Deploy Angular Client on Apache remote server:
– Normal deployment ->


– Sub-folder deployment ->


How to achieve it?

Start with production build ng build --prod.
-> Then copy output folder (dist/ by default) to Apache server.


What are Production --prod optimizations?

  • Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
  • Production mode: deploys the production environment which enables production mode.
  • Bundling: concatenates your many application and library files into a few bundles.
  • Minification: removes excess whitespace, comments, and optional tokens.
  • Uglification: rewrites code to use short, cryptic variable and function names.
  • Dead code elimination: removes unreferenced modules and much unused code.

If the app uses the Angular router, When asked for a file that it does not have, Apache Server will return 404 - Not Found error.
-> Configure 404 Error on the server to redirect requests for missing files to index.html:

ErrorDocument 404 /index.html

With sub-folder deployment, we use base tag to re-configure href as below:

– The HTML base href="..." specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets.

Then re-build & upload output(dist/ by default) to sub-folder of Apache server:



Sourcecode for deployment at: link

Start Vultr Hosting Server

Follow the link to Login to Vultr Hosting.

– Create a small server grokonez-angular-deploy such as:


Install Apache Server

– Use Putty, login to above server grokonez-angular-deploy:


– Install Apache server by cmd:

– Check your Apache server: sudo systemctl status apache2


Build Angular Client

– Build Production for Angular Client: ng build --prod


– Output is dist folder:


Deploy Angular Client on Apache Server

– Use scp to copy building files from local to remote server:


– Restart Apache server by cmd sudo service apache2 restart

-> Check results:



– Press SignUp button, got 404 Error:


– Press a link on Browser URL, got Error 404 ->


Configure 404 Error Redirect

We need configure redirect 404 error to index.html page.

– In Apache Server hosting, edit Apache configuration:

sudo nano /etc/apache2/sites-enabled/000-default.conf

– Add ErrorDocument 404 /index.html

– Full file:

– Restart Apache server by cmd sudo service apache2 restart

– Press Button SignUp, index.html is redirected:


Deploy in Sub Folder

How to deploy Angular App in sub-folder (example ./grokonez/demo) of Production Server?

-> Change value href of base tag in index.html as below:

Rebuild Angular client in Production mode with cmd: ng build --prod

– Copy build files from local to remote server:


Open Apache Server configure file by cmd: sudo nano /etc/apache2/sites-enabled/000-default.conf

– Change 404 error redirect to /grokonez/demo/index.html file:

Restart Apache Server by cmd sudo service apache2 restart

– Result:




By grokonez | November 16, 2018.

Related Posts

1 thought on “How to Deploy Angular on Apache Remote Server Example – Use Vultr Hosting”

Got Something To Say:

Your email address will not be published. Required fields are marked *