Setup

In this section we will configure our machines to get the most from this workshop.

Dependency checklist:

1. node (version 8 later)

2. Git

3. Angular CLI

4. Visual Studio Code

5. Visual Studio Code Extensions

The main dependency for being able to make an Angular application is node version 8+. The latest stable version of node is best to get if you do not have it already installed.

1. Install node

You can check your version of node by running the following command in the terminal.

node -v

If you do not have node installed or you are using a version lower than v4 then I you can get the latest stable version from www.nodejs.org.

2. Install Git

You can check your version of node by running the following command in the terminal.

git --version

If you would like to use source control and check out completed work then it is recommended to have git installed on your machine. You can download git from https://git-scm.com/downloads

3. Install Angular CLI

We need to have the Angular CLI installed globally. Run the following command.

npm install -g @angular/cli

4. Get Visual Studio Code

https://code.visualstudio.com/code.visualstudio.com

5. Get Visual Studio Code Extensions

The VSCode extension button

• Angular Essentials: Everything you need for angular in an extension pack

• Rainbow Brackets: Handy for many brackets when inlining observables

• TSLint: Great linting in VS Code

• Wallaby.js for unit tests line

https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentialsmarketplace.visualstudio.com

Angular essentials extension

https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-bracketsmarketplace.visualstudio.com

Rainbow brackets extension

https://marketplace.visualstudio.com/items?itemName=eg2.tslintmarketplace.visualstudio.com

TSLint extention

WallabyJS extension

6. Optionally turn on Visual Studio Code auto save

VSCode auto save feature

7. Update VS Code user settings to use single quotes and warnings for lint rules

• Open the command palette by pressing Ctrl + Shift + P and search for 'Preferences: Open User Settings'.

• Click the ellipsis and select 'Open settings.json' as shown in the following image.

Open User Settings (settings.json)

• Add to your user settings the below options.

• Note that many people like to hide the Open Editors explorer on the top right as it is just a list of open tabs which you can see on the tabs themselves.

{
    "tslint.alwaysShowRuleFailuresAsWarnings": true,
    "explorer.openEditors.visible": 0,
    "prettier.singleQuote": true
}