Running my first Angular project from Visual Studio Code

In this post I will explain how to setup the environment for Angular by listing the steps I have setup my first Angular project with Visual Studio Code. I start with a sample project downloaded from GitHub project Angular-GettingStarted by Deborah Kurata. Lets follow these steps:

• Download and install Visual Studio Code from https://code.visualstudio.com/
• In order to install required packages we will use npm (Node Package Manager). So download and install npm from https://nodejs.org/en/download/.
• Download and extract the project from github.
• From VS Code terminal, check if you have successfully installed npm by issuing simple command like npm -v. It will give you installed npm version number, like 6.4.1
• Issue the following command from VS Code terminal to install Angular CLI.

      npm install -g @angular/cli
     

  After installing Angular CLI we have to setup following two directory paths in Environment PATH variable.
  • C:\Users\YOUR-USER\AppData\Roaming\npm
  • C:\Users\YOUR-USER\AppData\Roaming\npm\node_modules\@angular\cli\bin
• Run following command to install dev dependency package introduced in Angular 6.0

     npm install --save-dev @angular-devkit/build-angular
    

• Now you can run the project by issuing the npm start command.

      npm start
     

  After successful compilation, it will open the website with the default browser window on localhost.

We have setup the development environment for Angular. I hope this helps some of you who get stuck with a similar problem.