Publish Angular 2 App to production in 5 mins

satish1v

Jun 5, 2016·3 min read

In angular 1 it is just a matter of moving a folder with the set of static files to the server and there you have a application in the production.

But that is not the case with angular 2 , you need to make sure typescript is compiled then NPM modules has to be integrated with System.js and many more stuff to do before production.

This is where Angular-cli comes for rescue !!

Installing Angular-CLI

Angular CLI is a node package , So it just takes a NPM install to install CLI tools.

NPM install -g angular-cli

Incase if you are wondering , Am I talking about command line interface , I am sorry VS developers !! Yes .

Angular CLI stands for angular Command line interface. Soon there will VS templates which can do the same .

Creating and Testing in Local

Once the installation is successful, Then it is time for creating a angular 2 application

You can do that easily with a simple command

ng new ReleaseTheKraken

Release the kraken is my application, replace it with your application name !!

It will create folder with the necessary dependencies !! You can just go to the folder and do a ng serve , This will create a live reload and run the application .

Above image provides the steps to follow easily. Now that you can see the application running!! it is time to deploy the application in production

Deploy to Production

Now that you have the application up and running using the free Github pages , it is time to move the application to production.

1. Create a repo in the Github. You can follow the steps in this page

Now that you have created Repository , you can add this repo using a simple command

git add remote origin “Repo Name”

2. Now we want our angular-cli to push the application which is running local to production , So we need install

you can do that using

npm install --save-dev angular-cli-github-pages

Now we have all ready , Just push the code using

git checkout master
ng github-pages:deploy --message "Optional commit message"

That’s it , you have your application live in production . I have done one myself , you can visit it through