How to set up an Angular development environment step by step

In order to start building web applications we need to prepare a set of tools which will help us to do this efficiently. Starting a project using Angular requires the knowledge about at least a few technologies. I do not want to discourage you at this point. I will show you what is needed for starting your first “hello world” project. I will base on free tools available on the Internet. I assume you have at least basic knowledge about Angular platform. If not, you may start from Angular documentation website. Your first web application project will be a good starting point for learning more about web applications development.

Node.js and npm

Let’s start from Node.js installation. Please download a binary from the Node.js home site and run the instalator. Node.js is a JavaScript runtime library. We will need it for running our project. What is also important we may install npm together with Node.js. Npm is a JavaScript package manager which we will use for installing dependencies for our project. The alternative of npm is other package manager called Yarn. When you installed Node.js with npm, go to the terminal and check the version of Node.js and npm in order to check if installation is successful.

$ node -v
v6.11.0

$ npm -v
3.10.10

Angular CLI

The next step will be installation of Angular Command Line Interface (CLI). We will use it for generating our “hello world” project. Angular CLI helps with generation of various blocks of Angular project like modules, components, directives, etc. We will be also able to run the project using this tool. We will use npm to install Angular CLI by typing in the terminal: npm install -g @angular/cli. After installation is done, let’s check the version of Angular CLI. If installation is successful, you will see similar output in your terminal.

$ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.0
node: 6.11.0
os: win32 x64

Let’s now generate “hello world” web application project. Create a directory for our project and within this directory type: ng new my-hello-world-app. After running this command we have created a new directory called my-hello-world-app with generated files of our project inside.

D:\angular>ng new my-hello-world-app
installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.app.json
  create src\tsconfig.spec.json
  create src\typings.d.ts
  create .angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'my-hello-world-app' successfully created.

Visual Studio Code

Visual Studio Code is free open source code editor with a lot of extensions and IDE features. Let’s install it and open the directory with our generated project.

Visual Code Studio

For better integration of the editor with Angular, install Angular Productivity Pack extension.

Visual Code Studio with extenstions

Now it’s the time for running our application. In the editor, go to main menu and from “View” option choose “Integrated Terminal”. You should have now terminal window opened. Now just type npm start or npm start -- --port <your_free_port_number> if default port 4200 is busy in your environment. Project should be compiled and our application should be available under URL of http://localhost:4200.

Visual Code Studio with running Angular app

Chrome browser with Angular app

Congratulations! You’ve just run your first Angular application. Your development environment is now set up. It is just the beginning. You may start to learn Angular by creating your own application which is the best way of learning new stuff. Just by doing it.

Tools used in this post