> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk4/error-debugging-in-angular/angular-errors-challenge.md). # 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 * [ ] Most recent stable version of Node * [ ] Most up to date angular CLI \ **COMMAND:** | **git clone ** | | ------------------------------------------------------------------------- | \ \ **You can find the repository at** [**angular-heroes-errors**](https://github.com/SoftStackFactory/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**](https://angular.io/tutorial)**.** ### **Serve Your Project** **You should have this command saved somewhere here it is.** ``` $ ng serve ``` {% hint style="warning" %} **You will get an error here. Try to google it and figure it out before moving on.** {% endhint %} **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.
### **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**](https://docs.google.com/document/d/1TW4MGNqzqk3EUHC5Fh8voTLNHd82Qf2a_1nY3XW38QA/edit#heading=h.kk1966kbedef) ### **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. ![](https://lh6.googleusercontent.com/Z0ke00TR6Zr0NfJIeJpddhtGWPml3BaI1dftiusv5Wg-Lix6S0lc9JpZ0XbYBbdPgwcKOVclsWxxKNk8gIL6mwixJoyJCSf-jBjq_J6RiRpQv1nrBM59Dbwu-4677tZTlLA8mvAp) 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**.**
We can view all branches on a repository by going to the repo in github and selecting branch.\ [**Angular-Heroes-Errors Git Hub**
](https://github.com/SoftStackFactory/angular-heroes-errors)![](https://lh6.googleusercontent.com/QgH4Ietg3zSKNyTZPRCgNjc4s_EYW3YidYydqyc0q2V6Ss51P6Ll-iM3db7Jjr1dcxKnOika6Q1CSJuPiT8BbwN8wOVK3IdmCKj6GndnS69_qIwnk9bM6gLyKCsm9wM1i1ZLvySz)
### **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 ``` $ chmod +x ./git-branch.sh ``` **Next** we need to run the script, ``` $ ./git-branch.sh ``` #### 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** ``` $ git branch ``` #### **Result** ![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LfMlL1JK4MsTfX75EbX%2F-LfMrb-WJ6a1dHPGs8GQ%2FScreen%20Shot%202019-05-20%20at%205.49.49%20PM.png?alt=media\&token=f6b9ffc0-5cc9-41ae-b462-10b6cd7d457b) The above image shows all the branches available, each branch has its own challenge / error with it. | Command | Description | | --------------------------- | --------------------------------- | | git checkout \ | changes to a different git branch | #### Example of changing branch ``` $ git checkout 1-import-error ``` #### result ![Changing to a Branch](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LfMtIwAjDjrpFjZtNZw%2F-LfMv-CYWGRus7yV9SSy%2F%5Bf36b14dae533a7e8bd9a70024d0ab7a9%5D_Image%202019-05-20%20at%206.03.14%20PM.png?alt=media\&token=36f36f78-80b2-4dcd-bde4-76860b6b23a6) Notice when you change branches it now changed in the prompt. Your active branch will always be shown here. ![Git Branch in Prompt](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LfMtIwAjDjrpFjZtNZw%2F-LfMvwYDZ6EcXvIDsA5d%2Fgit-branch-prompt.png?alt=media\&token=ae68bf70-4962-4fc9-b504-dae224e38b96) ### 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 ``` $ git log ``` ![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LfMtIwAjDjrpFjZtNZw%2F-LfMx0dYJG3R6ivvJ_8Y%2Fgit-log.png?alt=media\&token=bb66848b-61ab-4047-bf16-e173887f46ec) 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 \ | change to branch for challenge | | #2 | git log | look at the history and view the last commit message. | | #3 | q | quits the git log | {% hint style="success" %} After Fixing Error {% endhint %} | 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 "\" | commits your work , takes a snapshot of all the files in your repo. |