Angular8: Deploy your app on Apache server and in a sub directory

So now you have your Angular App successfully running on your PC and you’re ready to share it with the public or friends. There is a comprehension guide provided by Angular about how to deploy your app and host it on a remote server. Here I’m not going to repeat that and I’ll focus on how to config Angular to be able to run from a non-root folder of your server. There are two ways to config Angular.

First method is by setting the absolute path. And it is also documented by Angular using –base-href parameter in the Angular application build for production.

ng build --prod --base-href /my-angular-app

Second method is by setting a relative path. In index.html add below code.

<!DOCTYPE html>
<html lang="en">
  <head>
   ...
    <title>MyAngularApp</title>
    <base href="./" />
   ...
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

After this you can build your angular app as per normal.

ng build --prod

After the build, you can move all files from dist/ directory to /my-angular-app directory on your remote server. And access your app through

http://servername/my-angular-app/

Share: