Content

Saturday, November 3, 2018

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