Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Angular 5 Deployment - Deploy your Angular App

By Gary simon - Nov 05, 2017

Ready to build Awesome Angular Apps?

A Free Course, Free Tutorials and Full App Development Courses!

Great! Check your email

I've just sent you the first email to get you started.

The following tutorial is a part of our 100% free course Learn Angular 5 from Scratch - Angular 5 Tutorial

We've created a very simple Angular 5 app to this point, and now we want to build and deploy it. The first step involves using the Angular CLI to create a production build, and the next step depends on the app and your needs.

Let's get started..

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

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.

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 sub folder, 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=""

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 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 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:


I hope you found this tutorial useful, and this marks the very end of the course!

Share this post

Say something about this awesome post!