Angular project hosting is not similar to other project hosting. After completing your angular project development task, you can host the project easily in Apache server. How you can host an angular project in local and online Apache server is shown in this tutorial.

For local server:

You just need to run the build command to create the project folder that will run from /htdocs folder. Follow the steps to do the task.

Steps:

1. Change base tag in index.html file.

<base href="./">

2. Run the following command from angular project folder to build the project.

ng build –prod

3. Your project is ready now. Run the newly created folder under /dist folder from localhost.

For online server:

You have to do some setting before creating angular project for online hosting. A free hosting server is selected here to host the angular project. Follow the steps below to host your project in online Apache server. If you don’t have any hosting account, then you can create a free hosting account by checking the link.

Steps:

1. Select your hosting account where you want to host your angular project. Create a database in your hosting server and select a user for the database.
2. Modify the database connection file with your hosting server’s host name, database name, username and password.
3. Go to the phpMyAdmin section and import the database file.
4. Modify the path for PHP files with your online hosting path in api.service.ts file.
5. Change base tag in index.html file if you didn’t change it before.

<base href="./">

6. Run the following command from angular project folder to build the project.

ng build --prod

7. Upload the project folder under /dist and the folder of PHP files into your server.
8. Now check your site is working or not.

You can see the steps properly from the following video tutorial.