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:
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 fromnode-v5.0.0-x64.msi
. - then you can start Command Prompt in admin mode (it's not mandotory) and use
npm update -g
to updatenpm
or to usenpm install -g npm@latest
to install the latest version. I recommend you to usenpm -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/updatednpm
you can have it installed either inC:\Program Files\nodejs\node_modules\npm
or in%AppData%\npm
(the diretcoryC:\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 fileC:\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.
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/