My highly opinionated guide to setting up the best environment for Angular development

Developer Support

This post from Senior Premier Developer Consultant Laurie Atkinson gives you a step-by-step guide to getting started with Angular development.


Follow these steps to get up and running with an Angular application including source control, editor tooling, and essential commands.

Step 1 – Use Visual Studio Team Services (VSTS) for Source Control

(NOTE: If this is not available to you, any Git repository will work.)

  1. Navigate to my.visualstudio.com and log in with your MSDN account.
  2. Under Tools, select Visual Studio Team Services clip_image001
  3. Choose a domain name to host your project and make sure that Git is selected. clip_image002
  4. Wait while your project is created. clip_image003
  5. When complete, the landing page for your project appears and the URL to the project is [your-project-name].visualstudio.com clip_image004
  6. Access your Git repository under Code –> Manage repositories.
  7. Since VSTS named the project MyFirstProject, the name needs to be changed. This is done under Settings –> Overview. clip_image005

    Hovering over the name of your project in the left sidebar will allow you to edit it clip_image006

  8. Find the URL to your Git repository under Code à Files. Copy it to your clipboard. You will need this URL to clone the repository to Visual Studio Code. clip_image007

Step 2 – Use Visual Studio Code for editing your code

  1. Download and install Visual Studio Code (VS Code) from https://code.visualstudio.com/
  2. Run VS Code and open a folder into which you want the project to be cloned. clip_image008
  3. Open a terminal window from inside VS Code using either View à Integrated Terminal or the shortcut key Ctl + `.
  4. Git clone the repository using the URL copied in step 6. clip_image009

Step 3 – Set up Angular and its dependencies

  1. Install prerequisites for Angular and Angular-CLI – Node 6.9.0 or higher – https://nodejs.org/en/download/ – NPM 3 or higher. – bundled with Node NOTE: You can verify your existing Node and NPM versions by running these commands in the terminal window. node -v npm -v
  2. Install the command line interface for Angular (Angular CLI). The latest instructions are found here. https://github.com/angular/angular-cli#installation clip_image010
  3. From the terminal window inside VS Code, use the Angular CLI to create your application. Make sure you execute the command from the project folder that will contain this generated application. clip_image011

    When the Angular CLI completes, you should now have a folder in your specified directory named AngularDemo. Open this new folder from VS Code.

  4. Run the newly created application using the NPM script located in package.json and created by the Angular CLI. clip_image012
  5. Navigate to the running application in your browser. clip_image013

Step 4 – Commit changes from VS Code to VSTS

  1. Commit your newly created application to VSTS project from the Git tab in VS Code. This is done from the check mark icon labelled “Commit All”. clip_image014

    Note that the name of the repository is viewable from this tab as well. clip_image015

Step 5 – Install VS Code “Must-Have” Extensions

  1. From the Extensions menu, install the following:

vscode-icons which improves the readability of the explorer tab by adding useful icons to your files.

cid:image027.jpg@01D2BD35.0C59BE10

cid:image029.jpg@01D2BD35.0C59BE10

TypeScript Hero which provides typeahead and quick actions for adding import statements.

cid:image031.jpg@01D2BD35.0C59BE10

cid:image033.jpg@01D2BD35.0C59BE10

cid:image035.jpg@01D2BD35.0C59BE10

TSLint which adds interactive code analysis during development.

cid:image037.jpg@01D2BD35.0C59BE10

cid:image039.jpg@01D2BD35.0C59BE10

Step 6 – Run Unit Tests

  1. From the terminal window in VS Code, use the following command to run all the unit tests. clip_image019
  2. For a code coverage report, append the -cc argument. The results will be generated into the coverage folder. clip_image020

    clip_image021

0 comments

Discussion is closed.

Feedback usabilla icon