Using npm in Visual Studio 2015 - visual-studio

When using npm in Visual Studio with NTVS, what are the options that are in effect? How do I apply --save or -g?
Will it corrupt the Visual Studio project in anyway if I were to run npm outside of Visual Studio on the command line directly?

I can't say anything about ntvs, because I've never used it. But when we are talking about standard Package Manager Console Window:
npm install [packageName] - installs packages locally (analogue to --save option);
npm uses package.json file of the selected project;
to understand weather using npm outside of Visual Studio will corrupt your project or not, you should know this:
there may be several installations of npm (and node.js) on your machine. Node.js installer stores its packages in "*C:\Program Files\nodejs*" path by default and sets up the system PATH variable with this value. When you install packages via -g option, they are stored in "%APPDATA%/npm" path.
So, when you use npm outside of Visual Studio, system console will apply to the version of npm/nodejs which is stored in the PATH variable.
To make sure that you use the same version of npm in Visual Studio, open Tools/Options => Projects and Solutions/External Web Tools option. Visual Studio will use locations of external tools by the order, as they are located in the list.
You can add PATH variable and put it in the first place to use the same version as you system.console does:
at this picture VS will use PATH variable, while "$(VSINSTALLDIR)\Web\External" and "c:\Program files\nodejs" will be ignored (although, I have redundancy here, because, my system PATH variable contains "c:\Program files\nodejs" as well).
You can also check version of each npm installed on your machine. Just run "npm -v" in VS package manager console, and run it in your system console.
I have the same version for them because of my preferences:
node -v
v7.8.0
But when I run this command opening cmd at $(VSINSTALLDIR)\Web\External path, I get an older version:
hope this helps =)

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.

"C:\Microsoft.Cpp.Default.props" was not found

I have a project created in Visual Studio, 2013.
The project file has the following properties:
ToolsVersion="12.0",
PlatformToolset = v120.
I have Visual Studio 2013 and Microsoft Build Tools 2015 installed.
This project gets successfully built using MSBuild 12.0. Upon the attempt to build it with MSBuild 14.0 I get an error
MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.
As I understand, the problem is that the variable VCTargetsPath doesn’t get evaluated. If I specify the variable VCTargetsPath before the build (with the value C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120), the problem is solved.
However, this approach is not very convenient in case the path is different. Is it possible to somehow solve the problem in a more optimal way?
The registry key and its value:
HKLM\Software\WOW6432Node\Microsoft\MSBuild\ToolsVersions\12.0\VCTargetsPath $([MSBuild]::ValueOrDefault('$(VCTargetsPath)','$(MSBuildExtensionsPath32)\Microsoft.Cpp\v4.0\V120\'))
This will usually solve the problem:
Run on an elevated command prompt (admin):
npm install --global --production windows-build-tools.
npm is required and my recommended package manager.
Change ownership of the install dir (in my case C:\Program Files (x86)\MSBuild\14.0) to your user, instead of admin. (properties>Security>Advanced).
Sometimes step 2 is unnecessary. It is still recommended to avoid having to use admin console for some commands.
I recently reinstalled Visual studio 2017 and encountered this issue while trying to install "npm java".
The fix for me is:
set ms version to 2017: npm config set msvs_version 2017
set VCTargetsPath environment variable to C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\Common7\IDE\VC\VCTargets
run command console as system administrator
These steps solved my issue:
Run npm install --global --production windows-build-tools
Run npm install --save nan
Set VCTargetsPath environment variable to C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140
For those using VS 2019:
set VCTargetsPath="C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VC\v160"
Edit (Sep 2020):
Sometimes it requires a trailing backslash (as bmiller mentioned below)
For those the above answer does not work, here is another possible solution to look at.
Even the installation of build tools or VS 2015 did not work for me. So I tried installing below directly via PowerShell (as admin)
https://chocolatey.org/packages/visualcpp-build-tools/14.0.25420.1
Command:
choco install visualcpp-build-tools --version 14.0.25420.1
Once this was installed, set an environment variable VCTargetsPath=C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\v140
I solved this by:
Set VCTargetsPath environment variable to C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140
build using admin
I could not make it work with all the suggestions on this page
I downgraded nodejs to 10.15 and it worked fine
probably not the best answer but it works
When running MSBuild outside of Visual Studio 2019 (migrated from 2012), I had these kinds of problems.
I solved them running this MSBuild:
"C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin\msbuild"
(customize it based on your VS version and target architecture) instead of this one:
C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild
that I was using when I had Visual Studio 2012.
I solved the problem by loading the solution in VS 2019 instead of double-clicking the solution name in File Explorer.
My specific problem was using "yarn install" and during the build process, it was trying to build the node_modules node-sass component using MSBuild, and failing.
I would get the following error: "error MSB4019: The imported project "C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk."
This makes sense on a new developer machine with only Visual Studio 2022 installed. After investigating the node-sass module's build\binding.sln file, it appeared indicate that it requires Visual Studio 2015 VC++ Build Tools.
I then downloaded the "Visual C++ Build Tools for Visual Studio 2015 with Update 3" DVD image from Microsoft. After I installed it, it seemed to solve the problem, no PATH or registry changes required. When I ran "yarn install" again, building the module node-sass completed properly.
First I went to the path and confirmed that I didn't have that file. I was able to get that file by
opening the Visual Studio Installer,
clicking on "Modify" of the current installation
selecting "C++ Clang-cl v142 build tools (x64/x86)" under the Individual Components" tab.
Confirm the installation by clicking the "Modify" button
I tried npm install and VCTargetsPath, all not work. Finally solved after it after upgrading visual studio to the latest version.
Resolved by installing Visual Studio Express 2015 for Windows 10.
This happened for me when I used node version 14.15.3, install Node Version Manager, install lower Node version (8.x.x for example), switch to it and that should solve the issue.
After calling VS2019's vcvarsall.bat, it is necessary to use VS2019's MSBuild instead of the one in C:\Windows.
set VCVARSALL=%ProgramFiles(x86)%\Microsoft Visual Studio\2019\Professional\VC\Auxiliary\Build\vcvarsall.bat
call "%VCVARSALL%" amd64
set MSBUILD=%ProgramFiles(x86)%\Microsoft Visual Studio\2019\Professional\MSBuild\Current\Bin\MSBuild.exe
rem set MSBUILD=%FrameworkDir%\%FrameworkVersion%\msbuild.exe
In my case, the reason was that the system environment variable VisualStudioVersion was pointing to the removed version of Visual Studio.
The same solution was building ok from inside the Visual Studio but failed when building with the command-line MSBuild.
The problem was solved by changing the environment variable manually.
I have VS 2019 and I met the same problem trying to install module 'keytar' on Windows 10. This is what I did in order to solve the problem:
Opened "Visual Studio Installer" and removed extra 2017/2019 build tools (for example "Visual Studio Build Tools 2017", restarted the PC
Got back into "Visual Studio Installer" / "Visual Studio Professional 2019" / "Modify" and added "Desktop development with C++" workload
Got into project folder with my problem, removed node_modules folder
Opened CMDO
As #TheRennen suggested performed the command:
set VCTargetsPath=C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VC\v160\
(without quotation marks and with one backslash at the end)
run yarn command and now there were no errors.
I think now it a time to add VCTargetsPath into Windows env values.
node v14.19.0, npm 7.20.5, yarn 1.22.15
I have faced this issue while building my flutter application. The issue arises because of the program in my case flutter was unable to locate the file "Microsoft.Cpp.Default.props" which is required for building flutter apps in windows.
For solving the issue install MicroSoft Visual Studio(not Visual Studio code) from the below url.
https://visualstudio.microsoft.com/downloads/
Make sure to check the below option before starting installation.
After installation go to below directory.
C:\Program Files\Microsoft Visual Studio\2022\Community\Msbuild\Microsoft\VC
Note : I have installed community version of 2022 Visual Studio. The folder structure may be different based on your VS version
You can see few folders with version numbers
Open the folder and check which one have the "Microsoft.Cpp.Default.props" file . For my case it was the last folder v170. Open Environment variable and set "VCTargetsPath" variable with path to the folder in which "Microsoft.Cpp.Default.props" is present. Save path and restart the build process. This should work.
Make sure to use --global with the command in order to be able to use this package anywhere.
This solves the issue for me
While checking the .vcxproj file, I noticed the ToolsVersion was missing. I added it and it solves the issue.
Before :
<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
After :
<Project DefaultTargets="Build" ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

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.

Using npm from the command line with Visual Studio 2015 Web Project

After installing Visual Studio 2015 I am able to use the new editor features to add dependencies to Node packages and restore etc from within a Web project as per this documentation: http://webtooling.visualstudio.com/package-managers/npm/
Presumably Visual Studio must install node/npm somewhere in order to support these features, however it does not seem to modify my PATH to make these tools available on the command line (or via Visual Studio 2015 Command Prompt).
If I want to perform some npm operations on my project from the command line can I do this without installing node/npm again (which might become out of sync with the version of npm/node that Visual Studio is using) or is there a way to access the node/npm installation Visual Studio is using from the command line?
VS2015 installs node using Joyent's installer. It depends on the system-wide install and it does not have it's own specific or local version.
If you're command line is unable to find node.exe, I would first check your path property in your environment variables and add it if it's missing (it should be C:\Program Files (x86)\nodejs). If you see node's install directory there but still can't access it from the command line, reboot. Sometimes Windows needs to restart before it uses the updated path variable.
Hope that helps.

How to use Bower (installed from nuget) in Visual Studio?

I am trying to use bower inside Visual Studio 2013.
First I installed bower (not bower.js) via nuget's Package Manager Console.
Then I thought I could simply type
PM> bower init
inside the PMC to generate the bower.json.
But then it gave me this error.
bower : The term 'bower' is not recognized...
PS. The path of the PM> is pointing to C:\MyWebProject\MyWebProject\.bin.
What am I missing here??
Open the command prompt
Navigate to web project folder
Run bower init
You should have bower.json created by answering all answers on the cmd prompt.
Srinivas accurately described the steps needed to get you started with a bower.json in your root folder, which is where you want to start. You now have two main tasks:
Define dependencies - use Package Intellisense.
Install dependencies - use Grunt Launcher. They will be installed to the bower_components folder.
Reference dependencies - simply add them to you project (as links).
For more information see Introducing Gulp, Grunt, Bower, and npm support for Visual Studio.
Note that Visual Studio 2015 (currently in preview) has built-in, first-class support for all of the above: Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower.

Resources