Configuring Visual Studio 2015 to use latest NPM

Many recent web technology packages (like Angular) are not available on nuget and have to be retrieved via Node's NPM. Visual Studio 2015 Update 3 uses a deprecated version of NPM, so here's a few easy steps to get the latest version up and running.


1: Download and install NodeJS

2: Configure Visual Studio to use NodeJS

Open the extras/options/projects and solutions/external web tools window

Add a location by clicking on the leftmost button in the top right corner. This will result in a new line. You will want to make this contain C:\Program Files (x86)\nodejs\ or wherever  you installed NodeJS in step 1. Move this item to the top of the list so that VS primarily uses this location for NPM rather than its own installation.

3: Check

Create a new web solution (whatever floats your boat) and create a file named package.json at root level. The following text describes requirements for Angular development and can be used as a sample. 

{
    "dependencies": {
        "@angular/common": "4.0.1",
        "@angular/compiler": "4.0.1",
        "@angular/core": "4.0.1",
        "@angular/forms": "4.0.1",
        "@angular/http": "4.0.1",
        "@angular/platform-browser": "4.0.1",
        "@angular/platform-browser-dynamic": "4.0.1",
        "@angular/router": "4.0.1",
        "core-js": "2.4.1",
        "reflect-metadata": "0.1.10",
        "rxjs": "5.3.0",
        "systemjs": "0.20.11",
        "zone.js": "0.8.5"
    },
}

Right-click that file and pick "restore packages".



This should result in a node_modules folder at project root level. This folder is NOT part of your project, so you'll have to use the Show All Files toggle to reveal it.





4: [Optional] Configure Node JS to get past your Proxy.

This applies when restoring npm packages does not work.
Edit program files (x86)\nodejs\node_modules\npm\npmrc and add the following lines:

     proxy=
http://myproxy.mydomain.mytld:myport
     https-proxy=http://myproxy.mydomain.mytld:myport


Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

WPF Diaries : Using HLSL pixel shaders

HLSL is mature language that enables developers to address the graphics hardware in a familiar, C-like way. Next to vertex shaders, you can use it to write pixel shaders, which is what - with .Net version 3.5 SP1 - Microsoft introduced into WPF. What sounds like no big deal at first sight is a major leap towards serius WPF / Silverlight game development and - more generally - graphically intensive UI. That goes hand in hand with the DirectX-powered concepts of WPF, finally giving .net developers a good deal of acceleration without the need for unsafe code. Since we're not doing heavy calculus on our GPU, even decent hardware is sufficient to display manipulated images. Since the death sentence of XNA , hopes were shallow that .Net developers get in touch with this cool technology, but we've always loved the walking dead, haven't we? Quite a few WPF Pixel Shader libraries and tutorials have popped up (Some are linked below), and I really recommend getting in touch with the
Mehr anzeigen

Getting the Crisp back into your WPF Apps

Bild
WPF has a lot of advantages, it's perfectly sane data binding mechanism being one of the most outstanding ones.On the flipside, many people (meaning companies, mostly) have refused to switch from WinForms to WPF because of the "blurry" looks of applications written in WPF. This blurryness goes back to two mechanisms: 1)Text Smoothing Instead of relying on the system's ClearType mechanism, WPF does it's own thing-a-magic, which is blatantly inferior to the aforesaid. In fact, WPF smoothed fonts are a definite way to headaches, if read for some time. Note : The image is from a website that compares various Microsoft.Net Font-Smoothing implementations. They might be useful to integrate text in images, though.For business applications (displaying data grids etc.) this is a K.O. criterion. Nobody wants to have to take their glasses off in order to achieve readability, and nobody wants their software deployed along with a pack of aspirins. 2)SubPix
Mehr anzeigen

WPF and Workflow Foundation : XAML parser compatibility issues

I am absolute and unrestricted proponent of the Windows Presentation Foundation , and I think I cannot say this often enough : It makes things easier and more structured. And I love it, somewhere close to every day. Now, as three quarters of this year have passed by without any significant smoke rising, I have also had the chance to get to grips with Workflow Foundation , and was literally astounded to see how far Microsoft has taken the idea of XAML (Yes, I'm a bit late to that party).  Combining the two technologies was the next obvious step, which worked fine until yesterday.  Here's the story:  In my somewhat completed WPF UI, I added a WF Activity. An instance of that Activity could not be created, Visual Studio kept throwing "Namespace or Type not found" like it was candy. Funny, though, that intellisense proposed both the class and the containing namespace of the Activity. A more complete description of the issue can be found in my StackOver
Mehr anzeigen