What is TypeScript?
Why do we care about TypeScript with Angular.js?
Setting up Visual Studio to work with AngularJs 2.0 (Mostly TypeScript)
Sooo… AngularJs 2.0 comes pretty much ready to go from the start when using Angular’s CLI, npm, and Node.js. I did a post that goes over the quest to get the Angular CLI up and running go here, but that still requires manually starting the node engine in a console environment.
This new way, allows you to do two things:
1.) Start with a fresh environment that is completely free of any bloat that usually comes with the Microsoft or Angular starter templates.
2.) Easy integration into Angular (IE start / debugging) with Visual Studio. This is a big win because currently, the only Microsoft product that really works out of the box with Angular 2.0 is Visual Code. The problem there is that this is literally for front end development, so it is not meant for .NET services, applications etc..
If you are interested in just starting with a quick starter guide, there are fantastic guides and documentation here.
Setting up Angular 2.0
This article will assume that you have already installed Visual Studio (as of this writing 2015) and have some basic knowledge of using it. Setting up Angular 2.0 is very simple.
Setting up Node.js/Npm
1.) Make sure you are on Visual Studio 2015 Update 3 or higher.
2.) Install the Node.js and npm (Node Package Manager). This page has .msi packages for an installer that will install node.js (as of this writing v6.10.0 and npm 3.10.10).
3.) Go into Visual Studio Tools | Options and Look for a section called Projects and Solutions | External Web Tools. Make sure that $(PATH) is ABOVE $(DevEnvDir). This will ensure that your Visual Studio instance will look to outside sources before using its internal compilers. Here is a screenshot of what it looks like.
As you can see above, I pushed the location to Nodejs itself directly to the top, but you can do hte $(PATH) and it will work just as well. I just like being a little more explicit.
Configure Visual Studio to understand and Compile TypeScript files
1.) Next you want to make sure your Visual Studio understands TypeScript. The best way to do that is to either install it manually here or using npm and type the following in a command prompt:
npm install -g firstname.lastname@example.org
Set up ASP.NET project and Import Quickstart files
1.) Download the quick start files that are located here. Remember where you put it for later.
2.) Create a new ASP.NET MVC Empty project.
Including the Angular files into project
1.) Unzip the quickstart folder you downloaded and copy the src folder into the ASP.NET project under the solution folder (where the .csproj file is).
2.) In Visual Studio click the Show All Files icon at the top of the Solution Explorer. It looks like a multi page document. You will see many folders and files that have a dotted document icon next to them. This means that they are in the project directory, but the project itself has no knowledge of its existence.
3.) To import the files you need, Right click the file or folder and Select Include In Project. You want to do this for all of the following at least:
- app folder (answer No if asked to search for TypeScript Typings)
4.) Restore Packages using the package.json. To do this, Right click the file and select Restore Packages. Once completed, you should see a message in the outpt window that says:
npm command completed with exit code 0.
5.) The final step is to set the index.html to the default. To do this, right click the file and select Set As Start Page.
Last but not least, hit Ctrl-F5. You should now have a functional angular application that can be started through the Visual Studio debugger and will no longer require you to start the node server from the command prompt.
As a bonus, since it is already using node in the background, it is tracking your changes and refreshing the browser will reflect new changes in your Angular files!!!
That was a longer one for me to write, so I’m tired!
Happy Coding everyone… and good night! 🙂