Visual Studio shows npm packages as not installed - visual-studio

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.

Related

Dealing with Dual TypeScript installs

I'm trying to do some TypeScript tutorials but I'm hitting a weird problem. A while back I installed TypeScript 1.0.3.0 through Visual Studio here:
C:\Program Files (x86)\Microsoft SDKs\TypeScript
On the command line, when I check the TypeScript version it references that. I wanted to do some Angular (Angular version 2/4) so I loaded Node Package Manager and installed TypeScript through NPM. NPM loaded a newer version of TypeScript in another place on my computer. When I create Angular projects using Angular's CLI tool it somehow uses the NPM install. When I want to do simple, bare-bones TypeScript tutorials it uses the older version 1.0.3.0.
I lost my MSDN license so I can't run Visual Studio anymore. How do I update TypeScript that is in the Microsoft SDKs folder? Every Web site I check on installing or updating TypeScript tells me to use NPM.
If you don't plan to use it uninstall it, if you check Window uninstall software console panel page, you should find an item relating to that install.
If it's not there the simplest way would be to remove the old Typescript folder from your path variable (see here how to edit if you are not familiar). Look for the C:\Program Files (x86)\Microsoft SDKs\TypeScript folder and just remove it.
Then install the latest Typescript from npm.

Using npm in Visual Studio 2015

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 =)

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"

Open solution that contains long file paths

After building Bootstrap v4-alpha with npm, Visual Studio can no longer open my project, because the file paths are too long. It just hangs.
Bower installs bootstrap here:
C:\Users\BigFont\Documents\GitHub\2015-113MH\webapp\src\webapp\wwwroot\lib\bootstrap
That's fine. The problem arises after building bootstrap with npm. After deleting the bootstrap directory, Visual Studio can open the project, but I do not want to delete the directory.
How can we use Visual Studio with long path names?
Edit
My current workaround is to use Visual Studio Code, because it can handle long file paths.
I have resorted to creating folders at the root of my C:\ drive. I also use 7zip to delete folders to get around the 'file path too long' errors. You can open 7zip, click on the folder you want to delete and hit the Shift+Del keys.
NPM 2.0 creates nested folders that are very deep. Consider upgrading to NPM 3.0 as this fixes this problem and tries to create a folder structure that is as flat as possible.
If you are using Visual Studio 2015 RTM, it comes with NPM 2.0. NPM 3.0 will not be released with VS until the next update. You can still install NPM 3.0 but it is a little more involved. See this blog post for a step by step guide to install.

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