6. How‐To Deploy Your Angular Code to Hostinger - ayyjayy2/laynsleaf GitHub Wiki

Okay, so you have your web hosting platform setup, you have your code started and looking good, so... now what? This guide is specific to uploading your own code to Hostinger.

1. Add useHash to code In your app-routing.module.ts file, add 'useHash: true' to the imports.

image

2. Generate deployment/production files In your node.js terminal in your Angular project, enter the command: ng build --configuration production. This is what I found to be the most crucial step.

In your dist folder, you'll now see a sub-folder with the same name as your project.

image

3. Upload Open this folder in your File Explorer.

Method 1: In Hostinger, navigate to the file manager and into the public_html folder where your code goes.

image

Back in File Explorer, open your folder (dist/[project name]) to view the contents & select them all. Then, drag directly into the folder on the website. If you already have files there, you'll have to delete them.

Method 2: Right click your folder and send to a compressed folder. Once you have your compressed file, navigate in Hostinger to the 'upload website' page and upload it.

image

Test out your website and you should be good to go!

Some of the information I gave came from this video by AyyazTechwhich I found to be the most helpful in my own search.