Setup an Angular Development Environment in these Four Easy Steps

Setup an Angular development environment and start an Angular project by following these four simple steps!

Setup Visual Code

Download and install Visual Studio Code (VS Code), a lightweight TypeScript, HTML and CSS code editor.

Optionally, install the following helpful extensions:

TSLint

This is a helpful extension to provide inline highlighting to style inconsistencies and TypeScript errors to help produce maintainable quality code.TSLint

Document This

This extension helps when creating summary comments for constructors, properties or methods. Just type /** on the line above what needs to be commented and the parameters and default text will be constructed for you.

document this

vscode-icons

This is not necessarily a must have as you can use the Seti theme that came with VS Code. Having a folder icon alone makes navigation so much easier. After installing the extension, go to File -> Preferences -> File Icon Theme -> VSCode Icons.

vscode-icons

You can see the difference in the following image:

icon extension

Setup Node.js

Download and install Node.js. In VS Code use the Ctrl + ` keyboard shortcut to open the terminal window and run the following commands to ensure at least the node 6.9.x and npm 3.x are installed.

node -v
npm -v

versions

Install Angular CLI

In the same terminal, install Angular CLI, globally by using the following commands.

npm install -g @angular/cli

Angular CLI is a command line interface tool that we can use to easily setup a project, add components and much more!

Start your first Angular project!

Our development environment is now setup to where we can create a new Angular project with this simple command.

ng new quickstart-app

ng new

The Angular CLI has created all of these files as our project skeleton and even setup our test environment. We can see all of the available scripts for running, building and linting our project in the package.json file in the scripts section. These scripts can be run by typing npm followed by the script name.

You can build your project by using the following terminal command.

npm build

This will provide out errors or warnings and if the build succeeds it creates a dist folder with the compiled JavaScript, HTML and CSS.

Even if you didn’t install TSLint you can still run style checks against your project by linting your project.

npm lint

You can run all your tests through the Karma test runner that was added as scaffolding by the Angular CLI.

npm test

And lastly you can run your app.

npm start

This will locally host your webpages which you can then navigate to in a browser at localhost:4200.
I hope you found this article helpful in setting up your development environment. Stay tuned to upcoming part two where I will demonstrate connecting an Angular application to SignalR Hubs.