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

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


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:

enter image description here

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

enter image description here

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.


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


My answer is for MVC6 (didn't saw that MVC5 is needed)

I recommend to use a starter template. I can recommend a template which also uses HMR and Angular Universal (server side rendering for SEO and faster page loads):

https://github.com/aspnet/JavaScriptServices

Get started:http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/