How to make a simple Angular 2 Application and deploy it in GitHub pages

I’m going to use Angular-cli angular building tool to make my first angular application.first we need to install angular cli in our computer for that we have to run this command.

I’m running these commands in Ubuntu environment but you can run all these codes in Windows and Mac as well.

$ npm install -g angular-cli

To check whether Angular-cli is working or not run this command.If it exists it will show the version of angular-cli

$ ng -v

go to a folder where you would like to make the angular application and run this command to make a new angular application. in my case application name is  “app-name”

$ ng new app-name
$ cd app-name

To run our sample application we can use this command

$ ng serve

If your application is running successfully your command line will show this code.

[default] Checking started in a separate process...
[default] Ok, 1.718 sec.

Go to this URL from your browser. http://localhost:4200/

It will show “app works !” in browser

Now we are going to deploy this application on GitHub pages.

first we have to make a repository in GitHub .If you are already logged in to your GitHub account, go to this URL https://github.com/new

give a name to your repository .I have named it as “new-repo” .

After clicking the Create repository button. you will get a your repository URL

my repo URL is this. https://github.com/isuruAb/new-repo.git

Now we are going to add/link this GitHub repository to our project. place your repository URL instead of my one below.

$ git remote add origin https://github.com/isuruAb/new-repo.git

To check whether repository is added or not we can run this.

$ git remote -v

If it is working it will show this result.

origin https://github.com/isuruAb/new-repo.git (fetch)
origin https://github.com/isuruAb/new-repo.git (push)

Now we have to push(send) all data into the repository that we made.

push all these new files into repository  like this

$ git add .
$ git commit -m "initial commit"
$ git push -u origin master

Now you have to enter your username and password.Refresh your repository page to ensure that files are added.

You will see this part at the end of the page of repository.

deploy-on-git-hub-pages

run this command as they are saying.

$ ng github-pages:deploy

Now our angular application is ready to see.

https://isuruab.github.io/new-repo/

*If your application name is differ from the repository name , this link will give you a 404 page.If you are getting this kind of error we can change package.json file like this

  "name": "your-repo-name"
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s