Content

Saturday, October 27, 2018

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