How can I get angular2 to work in Visual Studio 2015 with TypeScript?

Question

I am trying to get Angular 2 to work in Visual Studio 2015 with Typescript. I am trying to get the most basic example to work in an MVC 5 type web project (web.config instead of config.json):

import {Component, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

I'm trying the most minimal things needed to make this work. So I downloaded the most recent Angular 2 (alpha .45) and copied over all of the TypeScript in the downloaded modules folder. Including all of the subfolders (minus the docs and examples ones.)

I am sure that this will work outside of Visual Studio as I have done this before, but I am trying to get it to work in Visual Studio and it is giving me over 3,000 errors and it looks like it is because I am missing other modules or something.

Here are a couple of the things I am missing:

Map (default_keyvalue_differ.ts, and many others):

export class DefaultKeyValueDiffer implements KeyValueDiffer {
  private _records: Map<any, any> = new Map();

assert (lexer.ts):

  scanCharacter(start: number, code: number): Token {
    assert(this.peek == code);

Set (command_compiler.ts):

function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
  var knownPairs = new Set();

startsWith (shadow_css.ts)

rule.selector.startsWith('@page')

require (parse5_adapter.ts)

var parse5 = require('parse5/index');

@reactivex/rxjs/dist/cjs/Rx (async.ts)

export {Subject} from '@reactivex/rxjs/dist/cjs/Rx';

There is much more than this. So my 1st question is, do I really need all of this stuff, or is some of it not required. 2nd and more importantly, how do I get Visual Studio to build my solution?

Note: I think this "very long example/tutorial" is what I was looking for except it's geared for MVC 6 (.NET Core) instead of MVC 5: http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/

Answer 1

I suppose you have the problem with old npm version which uses Visual Studio 2015. I recommend you to open Output window of Visual Studio and to choose Show output from "Bower/npm". You will see something like on the picture below:

The most imported line of the output is long and it's cut. I include it separetels:

npm ERR! command "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\\node\node" "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\bin\npm-cli.js" "install"

In other words, it's important to understand that Visual Studio 2015 uses some tools inclusive npm from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External directory. Angular2 have dependency package reactivex/rxjs, which require "npm":"~2.0.0", but Visual Studio uses old 1.4.9 version instead (you can verify the version of "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json"). Even if you would install the latest version of Nodejs and npm it will not help because Visual Studio 2015 will use the same old version of npm.

To fix the problem I suggest you to do the following:

• install the latest version of NodeJs. You can download it from https://nodejs.org/en/. If you would prefer to use x64-version then I recommend you to verify that you have already installed x86 in C:\Program Files (x86)\nodejs. If x86-version exist, then uninstall it before starting installation of x64-version. After that you can install Nodejs. Today it would be NodeJs 5.0.0 from node-v5.0.0-x64.msi.
• then you can start Command Prompt in admin mode (it's not mandotory) and use npm update -g to update npm or to use npm install -g npm@latest to install the latest version. I recommend you to use npm -v before and after the installation to verify that you install the latest version. Today it's version 3.3.12. Depend on how you installed/updated npm you can have it installed either in C:\Program Files\nodejs\node_modules\npm or in %AppData%\npm (the diretcory C:\Users\Oleg\AppData\Roaming\npm for example) or in both destinations.
• you should start text editor under administrator rights (Start menu, searching, type notepad.exe for example and press Ctrl+Shift+Enter). After that you should modify the file C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd and set as the content something like @"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %* or @"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" %*

After that you can just save package.json having the entry like "angular2": "^2.0.0-alpha.45" in "devDependencies" or "dependencies" section and the installetion will be successful. You will probably see just the warning like

because you use now "too good" version of npm: the version 3.3.12 instead of some 2.x.x version (based on the rule "npm":"~2.0.0" of the dependency package reactivex/rxjs).

P.S. Probably you have some other error messaged if you use MVC5 instead of prerelease version of MVC6 (ASP.NET 5), but the main problem is the same. You have to install new version of node and npm and modify C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd to use the new version of npm.

Answer 2

I know that SO isn't keen on pasting links to stuff, but this is a fairly large tutorial to follow, to just copy paste into here... and all bits of it are relevant to answer the question. Anyways, here's the tutorial provided by the Angular 2 team to get NG2 working in Visual Studio MVC 5:

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html