1. Build your Angular app for production with ng build

$ ng build --prod

2. Create a Firebase account & project If you haven’t already, open up a Firebase account account, go to the Firebase console and start a new project for your app.

3. Install the Firebase command line tools Install the Firebase CLI with the following command:

$ npm install -g firebase-tools

4. Login using the Firebase CLI & initialize your project Login to your Firebase account with the following command:

$ firebase login

Then initialize the project using this command:

$ firebase init

5. Deploy to Firebase Hosting

$ firebase deploy

6. And done!

$ firebase open

We have provided the documentation with the application. After following all the steps of production build section you will get the dist/ folder which containing index.html.

Now you can use any web hosting services to serve index.html in the dist folder.

I will be using Bluehost in this example; however, many other hosting providers will offer a very similar experience.

Go into the Bluehost control panel and access the file manager. Navigate into the File Manager. There you’ll find a dropdown list of directories. In the file manager, you will get public_html folder where all the requests made by the users through your main domain are being served from.

Go into the dist folder in your app’s root directory. Open it up and select all the contents inside the dist folder. Copy all the contents inside the dist folder, upload them into public_html/your_project_name.

Create and Upload the .htaccess File

In order for the routes to work in your Angular app, you need to add a .htaccess file. In the public_html folder, at the same level as the dist file contents, add a new file and name it .htaccess.

Edit the file and insert the following boilerplate information:

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>