How to upgrade NPM packages to the latest version in Visual Studio 2017? - visual-studio

After I upgraded to Visual Studio 2017, I'm not able to see the latest version of the npm package in the package.json file, and unable to upgrade. For every package, I see Unavailable.
This is what I see in the package.json:

Well that behaviour is strange. I'm using VS Code 2017 and it works like it should. Maybe uninstall and install VS again? Is your NPM working fine?

Related

Visual Studio shows npm packages as not installed

I recently moved to Visual Studio 2019 (from 2017) and editing the package.json file works fine but then I get - incorrectly - a warning on the dependencies folder in the solution view. It says that the package I modified / added is not installed, even though when I look at my node_modules folder, it is there and it's the correct version.
I tried to install it manually and when I run npm install --no-save (which is what VS does), the same thing happens. However when I run just npm install, VS removes the dependencies warning.
Is there any way to fix that? Either make VS see that the package is installed keeping the --no-save option, or making VS not use that option.

NPM Runner works in VS 2017 but not in Vs 2019

I have a project that is using npm and webpack for our CSS and JavaScript bundling, which works just fine in VS 2017.
However, we are now using VS 2019 and after installing the extensions for both the NPM and Webpack Task Runners to be the same as the VS 2017 installation.
In VS 2019, I get the following error.
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
So, I opened VS 2017 with same project and it still operates fine, bundling CSS and JavaScript with no errors.
This was a known issue in the preview VS 2019 releases, my current versions in
Software versions:
- VS 2019 Version 16.2.3
- VS 2017 Version 15.9.15
- NPM Task Runner 1.4.90 (same for both)
- Webpack Task Runner 1.5.94 (same for both)
Does anyone know how to fix this, as currently I am having to open VS 2017 just to run the Task Runner?
UPDATE
Interesting side note. If I open up a command prompt and run
npm run build
from the project folder, it works, so is this just some fault within the task runner?
Latest version of Webpack requires you to install Webpack CLI on your own now.
I think somehow, VS 2017 has locked into a specific version of Webpack while VS 2019 has installed latest Webpack due to ^ version flag in your package.json.
To fix the issue, open up a terminal to the location of package.json and run:
npm install webpack-cli --save-dev
Then try again in VS 2019.
Hope this helps!

Typescript version conflict in Visual Studio Code

I have an Angular2 project created with the angular-cli project templates in Visual Studio Code. Also, I installed the latest version of Typescript (2.0.3) via npm as well as via the Microsoft link (https://www.microsoft.com/en-us/download/details.aspx?id=48593) because I also use Visual Studio 2015. However, for some reason the I still get an error message when I start my Angular2 project. Note that even with a standard command prompt running tsc -v will still return 1.0.0.0.
How does tsc -v determine the version of typescript?
How do I get rid of this message in my Angular project and ensure
it will be using the latest version of Typescript?
What am I missing here? Appreciate your help.
If you only need the last version of TypeScript, on both Visual Studios, then you can
delete all previous installations which are located in: C:\Program Files (x86)\Microsoft SDKs\TypeScript.
reinstall the latest TypeScript version.
Hopefully everything will work.
Did you install TypeScript via NPM? If this is the case, try uninstalling it via npm uninstall -g typescript. Now reinstall it via npm install -g typescript and check if the problem is solved.
The best way is to allow VScode to only use the version of typescript installed locally.
Drop this in your .vscode/.settings file.
"typescript.tsdk": "./node_modules/typescript/lib"

npm config set C compiler not to vcbuild.exe

When trying to npm install a node project in a Windows7 machine I am suffering from the inglorious error message:
MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the location of the component to the system path if it is installed elsewhere.
Because I am under Cygwin I have already installed gcc ($ gcc -v and $ g++ -v respond in both Cygwin and cmd).
How can I tell npm to use gcc to compile instead of the vcbuild.exe that I don't have installed?
Note: I have already tried node-gyp and it did not work.
Note2: I know for sure the code runs without problems in linux.
Here is what sorted out my problem and the steps that I took to reach the long-awaited solution:
Installed Visual Studio Community but the VCBuild.exe was not there still.
Installed Microsoft Build Tools 2015 and tried to install the affected module as: npm install bcrypt --msvs_version=2015 but I got the following error:
error MSB8036: The Windows SDK version 8.1 was not found. Install the required version of Windows SDK or change the SDK version in the project property pages or by right-clicking the solution and selecting "Retarget solution".
My last shot was to install Visual Studio Express for Desktop and after npm install bcrypt --msvs_version=2015 I manage to npm install and npm start my app in Windows7!!
Lastly I uninstalled Visual Studio Community and Microsoft Build Tools 2015.
Note I had to remove the bcrypt module from the dependencies in package.json and install it as npm install bcrypt --msvs_version=2015 inside my app folder.

What else npm can be used in Visual Studio 2015 besides of installing bower?

Context:
I am configuring my ASP.NET 4.x project to use bower to manage client side packages, using VS 2015 Update 2. (I am following this stackoverflow guide/answer
All cool. However after created bower.json, and seeing output I've noticed the following output line:
"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd" install --force-latest
This means that VS does not even use the npm installed bower (which is under the
/node_modules/bower) instead launching some globally installed (it was not me) bower.
Question:
What else npm can be used in Visual Studio 2015 ASP.NET project especially besides of installing bower?
In case of the answer is nothing, Question 2:
Can I just eliminate npm (package.json), and rely my bower.json in the Visual Studio project (and delete /node_modules)
The whole scenario also begs for the Question+:
Where should I configure Visual Studio to use the npm installed bower instead of the existing "global" installation in C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd
npm can also be used to install packages for Gulp or Grunt tasks, which can then be run by the Task Runner Explorer in VS 2015.
You can configure Visual Studio to use a different version of Bower in Tools->Options->Projects and Solutions->External Web Tools. Move $(PATH) to the top of the list to use a globally installed version, or add a new project-relative path to the top of the list.

Resources