Infopulse - Expert Software Engineering, Infrastructure Management Services
Send message Request a call
Send message Please fill in this quick form and we will send you a free quote shortly.
* Required fields
Request a call Please fill in this quick form and we will call you back shortly.
* Required fields
Subscribe to Infopulse Newsletter Please fill in this quick form to be among the first to receive our updates.
* Required fields
Send an email to Vitalii Ruban Please fill in this quick form to contact our expert directly.
* Required fields
Read the rest of the Case Study Don't miss the most interesting part of the story!
Submit this quick form to see the rest and to freely access all case studies on our website.
* Required fields

Installing Angular 2.0 for Visual Studio 2015 from Scratch, Tutorial

Recently, I have become interested in migrating applications written with AngularJS to Angular 2, and this article, by the way, was supposed to be dedicated to this topic. But something unexpected happened. I used to install Angular 2 only on Node.js. However, since I mainly work in Visual Studio, I decided to install Angular 2 with its help. Having got through all the difficulties of this endeavor, I decided to sum it up into an article about installing Angular 2.0 release version for Visual Studio 2015 from scratch.

Step one. Accessories.

First, it is necessary to prepare Visual Studio for working with Node.js and NPM, as all the packets that Angular 2 depends on, are in NPM.

Install NPM Task Runner and Package Installer. They are needed for the connection between the Studio and NPM.

A few words about NPM and Windows.

As it turns out, Windows OS is quite original. By installing Node.js you automatically install NPM as well. But then if you install NPM globally (using -g flag), it’s very likely that it will be installed to a different location.
And it will not be used.

The problem lies in the fact that while installing Node.js, its installer writes into the PATH environmental variable the pathway to the NPM which comes with it. That’s why launching NPM from a console will address the NPM which comes with it and not the global one.

To fix this, do the following:

Find the location where the global NPM was installed (you can execute the npm root -g command). Then substitute the pathway to Node NPM in the PATH environmental variable with the pathway to the global NPM. Do not forget to do it for the system and for the user, as well as to reboot your workstation.

After installing extensions, launch the Studio and create a blank web project. Then you need to update the node.js and NPM used by Visual Studio. The Studio uses local NPM and node.js, not global ones. It does not know anything about the things installed in your system as it relies on the node.js which is in External Web Tools. If you don’t take this into consideration, the Studio will use outdated components and you won’t launch your application. So, click on the project and choose “quick install package”. In the appearing dialogue box type “gulp” and install it. Of course, this is not a must, but, frankly speaking, I don’t feel like creating package.json manually.

Having installed “gulp”, we receive package.json which we can work with.

And the first thing to do at this point is to check versions of node.js and NPM, which our studio will be working with.

Add a “scripts” section with commands «npm -v» and «node -v» and execute them from task runner.


  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1"
  "scripts": {
    "getNpmVersion": "npm -v",
    "getNodeVersion": "node -v"

The results I got were impressive: node v0.10.31 and NPM 1.4.9. I’d like to point out once again that these are the versions to be used by Visual Studio, and neither the installed node, nor the global npm have anything to do with them at the moment.

Now, it is time to bring everything to order. Add a new command to the package.json: “updateNpm”: “npm install npm@latest”, and launch it. Having waited a little, launch getNpmVersion. Npm has updated and is now version 3.10.5.

This will not, however, work for node.js. Frankly speaking, I have not found a way to update node.js, but I have figured out how to make the Studio use the version of node.js that I need.

First, find the location, where your node.js is installed, and copy the path there. Now go to Tools -> Options -> Projects and Solutions -> External web tools and add a new path there which directs the Studio to the necessary node version (if there isn’t one, just download and install it). Don’t forget to bring the new path to the top. Restart the Studio (you don’t have to restart Windows), and execute getNodeVersion command. You should get the update.

Take a break here, because it is not going to get easier now.

Step two. Installing dependencies.

Continue with project.json. Modify it with the following code and install all the dependencies of our application to it.


  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1",
    "typescript": " 2.0.3 ",
    "typings": "^1.0.4"

  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"

  "scripts": {
    "postinstall": "typings install",
    "typings": "typings",
    "cmd": "npm typescript",
    "getNpmVersion": "npm -v",
    "getNodeVersion": "node -v"

Step three. Configuring typescript for Visual Studio.

Let’s add our first .ts file. Create in the root the “app” folder and add an empty app.component.ts file. Do not create your own file names, because it may ruin everything. Now, close the Studio.

Visual Studio and TypeScript! TypeScript and Visual Studio

In other programs typescript settings are configured in a separate file – tsconfig.json, but everything is different in Visual Studio. If we work with typescript in CommonJS mode (and that’s the mode we are going to work in), the Studio will ignore tsconfig.json. Meanwhile, tsconfig.json has two options of major importance for us — “emitDecoratorMetadata”: true,
“experimentalDecorators”: true.
These flags are configured in .csproj file manually. More information can be found here.

Fuller set of options

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  <TypeScriptOutFile />
  <TypeScriptOutDir />
  <TypeScriptMapRoot />
  <TypeScriptSourceRoot />

Close the Studio, find *.csproj file, and add two new lines to PropertyGroup node:


Now, open the project, go to properties, and find a new tab – TypeScript Build.
Set the following values there: EcmaScript 6 and Module System — Common Js. Then save.

Step four. Code.

Now we can start writing code in our app.component.ts.
Copy the following there and build the project:


import { Component } from '@angular/core';
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
export class AppComponent { }

If everything goes well, the build will be completed without errors. This is our main component, or, in other words, this is our application.’

Add app.module.ts near app.component.ts with the following code:

import { NgModule }      from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { AppComponent }   from './app.component';
        imports: [BrowserModule],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
export class AppModule { }

Now it’s time to configure its bootstrap. Add the file to the “app” folder:


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();

Now, build the project again. There should be no error at this point as well. Building again is not necessary, but I recommend doing it to be on the safe side.

Then add to the root of the project the following:


    <title>Angular 2 QuickStart</title>
    <meta charset=""UTF-8"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1"">
    <link rel=""stylesheet"" href=""styles.css"">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src=""node_modules/core-js/client/shim.min.js""></script>
    <script src=""node_modules/zone.js/dist/zone.js""></script>
    <script src=""node_modules/reflect-metadata/Reflect.js""></script>
    <script src=""node_modules/systemjs/dist/system.src.js""></script>
    <!-- 2. Configure SystemJS -->
    <script src=""systemjs.config.js""></script>
      System.import('app').catch(function(err){ console.error(err); });
<!-- 3. Display the application -->

And then add the following to the root as well:


(function (global) {
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            rxjs: {
                defaultExtension: 'js'
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'

Step five. Launching.

Now we can launch our application.
If everything went well, you should see the following on your screen: My First Angular 2 App.

The ready code is available on GitHub.
Thank you and success attend you!

Share this blog article:
  • Petros Manesis

    Hi, I don’t understand what the following means “Find the location where the global NPM was installed (you can execute the npm root -g command). Then substitute the pathway to Node NPM in the PATH environmental variable with the pathway to the global NPM. Do not forget to do it for the system and for the user, as well as to reboot your workstation.”
    What do I have to do? Could you provide some more details?

  • Infopulse

    Hello Petros,

    I have prepared some detailed steps for you and hope this will solve your issues.

    For correct installation Angular2 and related packages you have to use fresh NPM and Node.JS. To get them follow next steps.

    1. Check your VS Node.js version. Inside the project, right click on package.json and choose Task Runner Explorer. Then use “getNodeVersion” command from explorer (node -v). For my first time I got smth like 0.X.X
    2. Download and install fresh Node.JS.
    3. Press WIN R and run cmd.
    4. Enter “node -v” command to check your global node version. (4.4.7 for me)
    5. Find where your installed Node.JS located.
    6. Inside VS, go to the Tools -> Options -> Projects and Solutions -> External web tools (see screenshot).
    7. Add new path to your fresh Node and move it to the top. This is important, because, VS will use first founded.
    8. After all this dancing, run getNodeVersion command again. You should see latest version.

    1. Check your VS NPM version. Inside the project, right click on package.json and choose Task Runner Explorer. Then use “getNpmVersion” command from explorer. Possibly, you will see smth like 1.X.X.
    2. Try to solve this in a simple way. Add new command to the package.json: updateNpm: npm install npm@latest and execute it. Also try to execute same command just from console (outside the studio).
    3. npm install npm@latest
    4. Run getNpmVersion command again. If your NPM is 3 – all is ok. If not – we have a problem.

    NPM with problem.

    1. We tried to updated NPM, but after getNpmVersion from the project we received nothing good.
    2. To solve this problem you have to edit PATH variable for your Windows. How you can do this, you can read here:
    a. Run npm root –g from console. You will receive your path to global NPM.
    b. Go to the variables section (2) and find path to NPM. It will be another, than we received in (a). Edit it and put path to your global NPM. Do this for user and system.
    c. Reboot your machine.
    3. Run npm –v from console. It should be the latest.
    4. Run getNpmVersion inside the project. It also should be the latest.

    After this you are ready to install fresh NPM packages for Angular.
    Hope this will help you.

    More info you can find here:
    Also you can to download template from here (it will helps you a bit)


Subscribe to our Newsletter