Recently, at work, we've switched from ASP.NET MVC development to AngularJS / Nodejs. It's been a bit of a struggle, and a decision that was outside my purview. Nevertheless, learning something new is always good, and it seems that MS is joining the MEAN camp part way by supporting Node, Angular, and Express with their suite of Visual Studio products. I believe you can also have a Mongo instance in Azure, but don't quote me on that - could be a senior moment ....
Unfortunately, with great complexity, comes great confusion...
At first, I simply added the Nodejs tools to Visual Studio 2013. That seemed to work ok, but at work we're using WebStorm. Visual Studio with Node simply seems to make projects and applications in a different enough way that it wasn't helping me with work. So I installed VS Code. I tried for weeks (part time at home on the weekends while managing family obligations) to get VS Code to do something as simple as build a one file .ts application. Finally, after banging my head against the wall (figuratively), I have gotten it to work. Hopefully, I can save some people some bruising ...
There were two salient factors that made my life so miserable for so long.
- If you have installed Node Tools for Visual Studio, and then subsequently run (as suggested) "npm install typescript -g" to install typescript for VS Code, you now have TWO (count them, two!) potentially different versions of the typescript compiler in TWO different places.
- Running "npm install typescript -g" puts typescript in a location that is not reflected in your PATH system variable. Yet all of the "examples" of how to configure your tasks.json file seem to assume that the npm-installed typescript compiler will be found automagically. Oddly enough, this did not happen for me.
So the corrective actions that I took to get things to work are actually quite simple.
- Remove the path to the Node Tools installed version of typescript from your PATH system variable. If you don't know how to do that instructions are here.
- In a command or powershell window enter "npm list -g". This will show you all the globally installed npm packages. Here's what mine looks like:
c:\>npm list -g
C:\Users\Steven Archibald\AppData\Roaming\npm
└── typescript@1.7.3
What's important is that first line of the response:
"C:\Users\Steven Archibald\AppData\Roaming\npm"
Copy that
from your machine and save it in a text file for the moment.
When you create your first tasks.json file in VS Code, it will look like this:
// A task runner that calls the Typescript compiler (tsc) and
// Compiles a HelloWorld.ts program
{
"version": "0.1.0",
// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "tsc",
// The command is a shell script
"isShellCommand": true,
The line, "command" : "tsc", is why my .ts files were not being compiled. The root of the problem is, VS Code is just going to look in your local directory (apparently) to find the typescript compiler. It won't find it there - you installed it globally, remember? And you don't have a path statement to point to where it really is.
So, you could add the "...\npm" path to your PATH system variable (I haven't tried that yet), or you could change your tasks.json file to have:
"command": "C:\\Users\\Steven Archibald\\AppData\\Roaming\\npm\\tsc",
It now works as expected!
Note that your path will be different based on what your "npm list -g" returns, and that the "\\" are required to escape the "\" character.
Hope this helps save people some time, and Happy Typescripting!
