Home / Angular / Angular 5 Deployment – Deploy your Angular App

Angular 5 Deployment – Deploy your Angular App

Creating a Build
As mentioned, we need to use the Angular CLI to create a build of our app. Hop into the console within the project folder and run the following command:

$ ng build

This will take 5-20 seconds to run. The end result is a new folder called /dist within the project root folder

Windows Shared Hosting
I ran this command on the project we’ve been creating, and these are the actual sizes of the files produced:

5.83 kB
22.8 kB
200 kB
12.1 kB
3.26 MB
Wow, our app is nearly 3.5mb! That would take forever to load. It’s really large because we didn’t specify the –prod flag, which is short for production.

Run this command in the console:

$ ng build –prod
These are the new file sizes:

1 kB
2 kB
355 kB
60 kB
1 kB
Yep, nearly a 90% reduction in file size. This is because the –prod flag enables a number of optimizations that drastically reduces the size of the project.

You need to ensure that you add this flag whenever you’re deploying your Angular 5 app.

Deploying your Angular 5 App
At this point, if your app does not rely on any type of backend server (as in our case), you have a number of options.

You could take the files in the /dist folder and upload them to a server. Just note, if you’re uploading them to a subfolder, you will need to run the following build command:

$ ng build –prod –base-href=”myURL”
The –base-href flag will allow you to designate the correct URL for the app to load.

You could also use a nifty node package to deploy your app to github pages.

Deploying to Github Pages
If you don’t have an account at Github, go ahead and create one.

Then, create a new repository for your project.

Next, in the console, run the following command:

$ npm i -g angular-cli-ghpages
This will install a CLI tool globally.

You will also need Git, you can download it here.

Because we’re going to push our Angular 5 project to a subfolder via Github pages, we need to rebuild it with the –base-href flag:

$ ng build –prod –base-href=”https://YOURUSERNAME.github.io/REPO-NAME/”
Next, run these commands to setup our project folder push to the new repo:

$ git add .
$ git commit -m “first commit”
$ git remote add origin git@github.com:yourinfo/yourgit.git
$ git push -u origin master
Then, finally, we can use the Github-pages CLI to push our project to github-pages:

$ angular-cli-ghpages
If all goes well, it will respond with Successfully Published!

You can now visit the YOURUSERNAME.github.io/REPO-NAME/ address and the app should load.

Other Deployment Options
You may be interested in deploying your Angular 5 app to Heroku, Azure, AWS, etc..

Check out these resources if this is the case:

Deploying to Heroku
Deploying to Azure
Deploying to AWS

About Mohammad Fareed

Software Engineer @ Tekzenit.

Check Also

What’s new In Angular 5? What Is the Difference Between Angular 4 and Angular 5?

Angular, one of the best open-source JavaScript frameworks for web application development, recently upgraded with …

Leave a Reply

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