How to setup an existing Angular 7 app using GitHub.com?

Go to the directory where you want to work on the existing Angular 7 app

Clone the Github location to the local directory

git clone https://github.com/<handle>/<repository>.git

Please Note: You don't need to create the root directory, the cloning process would create the directory.

change to the root directory

cd <approot>

Install all the npm libraries from the package.json

npm install

Sometimes this might modify the package-lock.json. Lets learn to do a first commit for this file

git status

This should display the master branch and the file package-lock.json as modified.

In order to check-in this file we need to do the following

1. Create a new local branch
2. Add the file and give a commit message on the local branch
3. Push the changes of the local branch to the remote GitHub.com repository
4. Make a pull request from the newly created remote branch to the master branch
5. Review the pull request and merge this to the master branch
6. Delete the newly created remote branch
7. Delete the local branch
8. Synchronize the local master branch to the remote master branch

Create a new branch

git branch packagejsonbranch

// Checkout this branch

git checkout packagejsonbranch

View the changes

git status

This should show the 

modified:   package-lock.json

Lets add and commit this change

Please note the dot (.)  This a short form of adding all files

git add .

git commit -m "Package-Lock.json modification"

Lets add the remove origin site to this project

This is optional do this only if there is an error, even if its not an error, you can do this and git would ignore it

git remote add origin  https://github.com/<handle>/<repository>.git

Ignored message

fatal: remote origin already exists.

Push the changes to the remote branch

git push --u origin packagejsonbranch

-u and --set-upstream are the same. This is to link the remote branch to your local branch so as to do git pull and push commands without the origin names

Login to GitHub.com

You should see a create pull request from the master, (Note: Green button on the screen)

Compare and  Pull Request, when you click on this it opens up "Open a Pull Request".

Open a Pull Request:  special note on the base:master to the compare: packlockbranch. Click on Create Pull Request. This opens up "Merge Pull Request"

Merge Pull Request: This show a confirm message. Once done this show Delete Branch

Delete Branch : This show your merge branch is deleted

Now we come back to your local computer branch

Move the checkout from packagejsonbranch to master

git checkout master

Delete the worked branch, ignore the warnings

git branch -d packagejsonbranch

Synchronize the master from the remote master

git pull origin master

Check the status of master

git status

It should display Already 

Your branch is up to date with 'origin/master'.




nothing to commit, working tree clean

How to upgrade an existing Angular app to the latest version?

Sometimes you might need to update an existing Angular app which you have developed.

Do make sure that you have taken a backup or if you have version control like GitHub.com then you can go ahead in your local copy on a separate branch.

Execute the following command by going to the root directory of the app
ng update @angular/cli @angular/core

How to setup a new Angular 7 app on GitHub.com?

This consists of three steps

Step 1: Create the repository on GitHub.com

1. Login to your Github.com account
2. Go to the repositories list https://github.com/[yourhandle]?tab=repositories
3. Click on New Repository
4. Give a name example tourofheroes-app
5. Select private or public if you have a paid account.
6. Do not select Initialize this repository with a README (The default selection). The reason being Angular would generate this file and we would be adding this from local computer

Step 2: Creating the angular app on local computer

1. Make sure that Angular CLI is installed as described in article How to install Angular 7 CLI?
2. Go to the folder location you want to create your application
3. Issue the Angular Cli command for initializing the application
4. ng new tourofheroes-app --routing --style scss
5. To keep this flow simple, do not change any files as of now

Step 3: Pushing these changes to GitHub.com

1. Go to inside the folder created in Step2 namely "tourofheroes-app" cd tourofheroes-app
2. Attach the remote GitHub.com repository that we have created 
3. git remote add origin https://github.com/[yourhandle]/tourofheroes-app.git
4. Push the changes to the remote Github.com repository
5. git push origin master
6. If the GitHub.com credentials are not setup before, it would ask for the username and password. Do enter the same

If you now go to your GitHub.com repository you would find the ReadMe etc all populated.


Note: This assume that you have setup your GitHub.com credentials previously to be able to interact with GitHub.com using command line.

How to install Angular 7 CLI?

In the new version of Angular 7, the CLI (Command Line Interface) is changed from "angular-cli" to "@angular/cli". So the correct command to install the CLI is

npm install -g @angular/cli

This would install latest stable release of Angular

Warning: do not issue a npm install -g angular-cli@latest This would install the latest version which could be beta of the older angular-cli and not @angular/cli.

Once done issue the following to verify the version to be 7
ng version
Note the version (as of this writing 7.0.3)

How to update git credentials after changing GitHub.com password?

Once you have changed your password in GitHub.com do the following in the git command line

You would notice that existing git pushing don't work and you would get a fatal error.
The command to execute is
 git config --global credential.helper osxkeychain 

The flow would be as follows, once you get the error issue this command and then try pushing to GitHub.com, it would now prompt the credentials again to be updated.

$ git push origin master remote: 
Invalid username or password. fatal: Authentication failed for 'https://github.com/[yourhandle]/[yourrepository].git/' 

$ git config --global credential.helper osxkeychain 
$ git push origin master 
Username for 'https://github.com': [yourhandle] 
Password for 'https://[yourhandle]@github.com':

How to configure GitHub for first time use?

Github.com is an online enhanced version of Git.

Git is locally installed in each of your work stations. This is then used as a client connecting to the server version of git which is GitHub.com

In a way what you are doing is like an offline web application, you do all the work in your local computer and when you are done with the work, you sync up with the server. There is no need for Internet connection etc.

Git is usually installed in your laptop either by installed XCode in Mac


Go GitHub.com and register an account for yourself. It can range from a free account, a private account or a company account. The various description are given in GitHub.com

Once done on your laptop do the following

## This is required for making sure that all your commits done on a repository have the correct name
git config --global user.name "<Your GitHub.com Handle>"
git config --global user.email "<Your Email Address used for registering to GitHub.com"


## Create a new repository called GitHubHelloWorld in GitHub Online
## Create a Directory on the local computer
mkdir GitHubHelloWorld

move to the directory and give the following command
git init

# create a new file
readme.txt and edit the text

# add the file to git
git add readme.txt

# commit the file
git commit -m "Add readme.txt"

# Add a remote origin in preparation for pushing to GitHub.com.
# You need to add this only once
git remote add origin https://github.com/<youruseraccount>/GitHubHelloWorld.git

# Push the changes to GitHub.com under master. More on this later on the branching strategy
git push origin master


# Some useful commands
# Find all the files which are changed in Local which is not synced up with server
git status

# Short cut to add all files to git for the changes
git add --all

# Commit all the files
git commit -am "Initial Setup of Maven Project"

# If you don't want certain files to be in the repository, you need to add a .ignore file. This file would have the extensions or the file pattern you need to exclude from source control