Angular Errors Challenge
Setup Directions
First create a week4 folder in challenges if you do not have one already and make that week4 folder your working directory in the terminal. While in the week4 folder create a clone (copy) of the following github repository in your cloud9 workspace
prerequisites
COMMAND:
git clone https://github.com/SoftStackFactory/angular-heroes-errors
You can find the repository at angular-heroes-errors
Once the repo has been cloned into your workspace you will see a new directory called angular-heroes-errors. Within the angular-heroes-errors directory you will find a project nearly identical to the Tour Of Heroes Tutorial Project found in the Angular Documentation.
Serve Your Project
You should have this command saved somewhere here it is.
You will get an error here. Try to google it and figure it out before moving on.
Install required dependencies
Explanation:
npm install is always needed to run after cloning an existing project. The reason why, is by default the repo you cloned does not have all of the applications dependencies included with it. Dependencies are just other code bases, libraries your app needs to run. The list of an applications dependencies is stored in a project’s package.json file, found in the apps root directory. This file has a list of the libraries the app needs to run, as well as the version of that library. When we run npm install it goes through the project’s package.json dependency list and installs all them in your node_modules folder.
Environment Setup Recap
We cloned or copied an existing angular project from github in Step 1. This is a common way we can inspect other people’s source code or projects. Last but not least we installed all of the project dependencies using Node Package Manager (NPM)m by running the command npm install.
Objective
Debug each branch utilizing your problem solving skills from your debugging tool belt.
Reference: Angular Error Guide - How to fix errors
Git Branches
We will be using git branches in the exercise. This is not the main focus of the lesson but we are using them in this lesson. So this part is for context.
Git branches are just different timelines for our code base. In the above image, each circle is a commit, a snapshot of a moment in time of our codebase. The most current commits are on the right and are the most recent commits on their respective branches. The most recent commit made is called the head, the full purple circles on the end. In this case we have 2 branches named master and feature1. Feature1 branch was created after the second commit was made on the master repo so they both have the same first two commits, on the left. The commits that are on feature1 branch do not exist on the master branch. The feature1 branch does not have the last 3 commits that were made on the master branch. We can move back forth between branches in git. In short git branches are different timelines and in this case each one will have a different error on it.
Getting all branches
Included in the repository is a file that will get all the branches for you, however in you must run the following commands first.
First run the following command so we can execute the file
Next we need to run the script,
Recap
The previous command, chmod +x makes a file executable and then after that we running it. The script itself is pulling all the branches for you so you don't have to do it manually.
Our Challenge Git Process
In this repository, angular-heroes-errors, there is a single error to be fixed in each branch. The name of the branch corresponds to the type of the error, to give you some context.
Some errors will be produced during the transpile and compiles stages, other during runtime. The transpile and compile errors will show up in the terminal in cloud9. If the branch does not have an error during transpile then it will most likely be a runtime error which can be found in your chrome browser dev tools console.
Runtime errors happen when our application is run in the browser window and the error will show in the console or on the window. You must be using chrome web browser for this exercise.
1. list all branches
Result
The above image shows all the branches available, each branch has its own challenge / error with it.
Command
Description
git checkout <branch-name>
changes to a different git branch
Example of changing branch
result
Notice when you change branches it now changed in the prompt. Your active branch will always be shown here.
The Error
Each branch will have a different error, some will show when you transpile in the terminal others in the browser console. In order to give you more context on the type of the error you are looking for, the branch name relates to the type of error. We can also view the last commit message to get more information on what was last committed to cause the error. To view the history of the commits run
The first commit message is in yellow and at the top of the list, we can ignore the rest of the messages below. Hit Q to exit
Process Recap
Changing to a Challenge
Step
Command
Description
#1
git checkout <branch-name>
change to branch for challenge
#2
git log
look at the history and view the last commit message.
#3
q
quits the git log
After Fixing Error
Step
Command
Description
#1
git status
view files that were changed
#2
git add .
adds all the files that were listed in git status
#3
git commit -m "<your-message>"
commits your work , takes a snapshot of all the files in your repo.
Last updated
