Tour of Errors Challenge
Last updated
Last updated
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
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.
Next, change directories into the newly created error-app directory.
cd angular-heroes-errors
Next Check if our node version is up to date
node -v
Before moving on within the newly cloned project, make sure that we have an up to date version of the Angular CLI by typing:
ng -v
If you installed it from a previous exercise, it should look something like this:
If the command is not found, install the most up to date angular cli
npm install -g @angular/cli
You should have this command saved somewhere here it is.
ng serve
You will get an error here. Try to google it and figure it out before moving on.
Install required dependencies
npm install
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.
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.
Reference: Angular Error Guide - How to fix errors
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.
In this exercise 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.
Lets first see what branches exist on the remote repo with
git branch -a
Result: Your font colors might be set different. *Note hit q to quit this branch list.
Explanation: This command git branch -a, lists all available local and remote branches. When we clone a repo we only get the master branch, not all the branches on the repository. Again remote meaning the repo we cloned from on github. In the image all the branches are listed local and remote. Local branches do not have remotes/ preceding them. Now Copy branch a Then hit Q to close this menu
2. Paste the branch you copied for <branch-name>
git checkout <branch-name>
Example:
git checkout remotes/origin/1-import-error
The image above is stating we have a temporary unnamed branch to work around and make changes freely with no consequences. In the blue highlight is the last commit message made. This commit message will also have information relevant to the error on the branch.
After you have fixed the error on the branch stage the file so we can commit it.
git add .
Command Explanation: adds ALL files changed to be committed. If you do git status staged files to be including in the commit will be listed green.
git commit -m "your commit message here"
This will save or commit changes in files we want to keep and mark them for a reference. Your commit message should be short but explain what your changes did or fixed.
Now repeat the process going to the next branch. Look at branches in the local repo and repeat step one with a new branch.
git branch -a
This will list all branches on your local repository or repo. You can also view the branches on the remote github repository.
