TypeScript 2.0, AngularJs 2.0 and Visual Studio in harmony: Setting up Visual Studio to have NO TypeScript compile errors without custom templates

What is TypeScript?

TypeScript is an interesting language. It is an open-source programming language that was created by Microsoft. It is considered a superset of JavaScript and ultimately compiles down to JavaScript at the end of the day. Is it new? Actually no! Much like the MVC pattern, it’s been around a while (not quite as long as MVC, only since 2012).

TypeScript has recently made a lot of traction because it is a great way for back-end and desktop application developers  to enter the web space. With JavaScript being a dynamic language and full of strange idiosyncrasies, it can be quite daunting to enter the web space for a developer with strongly typed language background (C#,Java etc..). Typescript gives you a strongly typed language with a more modular and SoC feel. It then takes that code and compiles it down to JavaScript on save. This means that by deployment, it is raw JavaScript. I will be doing a follow-up post on TypeScript as this is not the focus of this post.

Why do we care about TypeScript with Angular.js?

Angular.js 1.5x still used a similar approach to other frameworks. It extended JavaScript. TypeScript however,  is it’s own language. Instead it compiles down to JavaScript. This has become the preferred approach to use Angular 2.0. This is a big win to anyone using Visual Studio or Visual Code, because you get Intelisense, Compile errors and many other features of a strongly typed / compiled language.

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.

nodjs-default
Nodejs compiler as default for VS

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:

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.

angular-imports
angular files not yet imported

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)
  • styles.css
  • index.html
  • package.json
  • tsconfig.json

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! 🙂

 

5 thoughts on “TypeScript 2.0, AngularJs 2.0 and Visual Studio in harmony: Setting up Visual Studio to have NO TypeScript compile errors without custom templates

  1. Greetings! I know this is kinda off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having problems finding one? Thanks a lot!

  2. I think this is one of the so much vital information for me. And i am happy studying your article. However wanna observation on some normal things, The web site taste is great, the articles is really great : D. Just right job, cheers

  3. Pretty nice post. I simply stumbled upon your weblog and wanted to say that I’ve truly enjoyed browsing your weblog posts. In any case I’ll be subscribing on your feed and I’m hoping you write again soon!

  4. Pretty great post. I simply stumbled upon your blog and wished to mention that I’ve truly loved surfing around your blog posts. In any case I will be subscribing for your feed and I hope you write once more soon!

  5. Aw, this was a really nice post. Spending some time and actual effort to generate a top notch article… but what can I say… I procrastinate a whole lot and don’t manage to get anything done.

Leave a Reply

Your email address will not be published. Required fields are marked *