Angular 2 / TypeScript / Visual Studio Code – Tutorial

  Angular, TypeScript, Visual Studio Code

Contents

Introduction

The goal of this walkthrough guide is to teach you a simple workflow which you can apply to your daily work when you start developing Angular 2 apps. In the first chapter we will setup the development environment using Visual Studio Code. The second chapter will demonstrate how to create a basic structure to your project by using a boilerplate code generator. The following chapter will refine the development environment with some convenient build tools, before the final chapter will complete the Angular 2 app by leveraging the master / detail development pattern with an external data source.

Prerequisites

A basic understanding of  npm (installed with NodeJs) would help but is not mandatory.

Download and install nodejs :  https://nodejs.org/en/download/

Download and install Visual Studio Code: https://code.visualstudio.com/download

How to setup VSCode, Node.js and Npm behind a corporate web proxy

If you are behind a corporate web proxy, you need top configure the appropriate settings before you can use Node.js and npm. For VSCode to access plugin repositories, setting the HTTP_PROXY and HTTPS_PROXY environment variables is also required.

set HTTP_PROXY=http://user:password@proxy.domain.com:port
set HTTPS_PROXY=http://user:password@proxy.domain.com:port

In most cases, user:password is not required. Example:

set HTTP_PROXY=http://proxy.example.com:8080

It’s advisable to add the two variables to the Windows environment settings in your system configuration. For our purpose, setting the HTTP_PROXY and HTTPS_PROXY environment variables just isn’t enough, though. npm uses a configuration file and the necessary setting can be added to it via the command line

npm config set ....

Getting npm to work behind a proxy requires the proxy and https-proxy settings. Notice the - (dash) is not an _ (underscore) ! Open a command prompt or terminal session and run the following commands to configure npm to work with your web proxy. The following commands use proxy.company.com as an example address and 8080 as the port.

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

If you need to find out what the proxy address of your company is, follow this procedure (stolen with pride from http://superuser.com/questions/346372/how-do-i-know-what-proxy-server-im-using)

The auto proxy detection system works by downloading a file called wpad.dat from the host wpad. First confirm this host exists from a command prompt:

ping wpad

If it doesn’t exist, you may have to put the correct DNS suffix. In the same command prompt, type

ipconfig /all

You should see a Primary DNS Suffix and a DNS Suffix Search List

Try appending each of these with a . to wpad:

ping wpad.<primary dns suffix>

If any of these work, then in your browser enter http://wpad.<suffix>/wpad.dat. This will download the proxy auto configuration file you can open in notepad.exe

Toward the bottom of this file, you should see a line saying

PROXY <host:port>;

It might be repeated if you have multiple proxies available. The host and port are what you need.

LEAVE A COMMENT