Getting Started With Angular 2 In Visual Studio 2015

Angular 2 And Visual Studio 2015?

VSTSNG2PaintI want to start learning Angular 2!  We have an enterprise project that will be developed in Angular 2.  In fact the contracting firm will create a minimum viable product and then it will be up to us to do the rest.  So I really must learn Angular 2.  We also use Visual Studio 2015 Enterprise edition.  Most of our current projects target .NET 4.

If you have looked into Angular 2 just a bit you will find a huge difference.  Most people are teaching it using Code or some other IDE that is not Visual Studio.  So my goal in this post is to take the 5 Min Quickstart from Angular 2 and make it run in Visual Studio 2015.

I will not go into detail on every bit, please see the Quickstart for that information.  I am just focusing on getting it running in Visual Studio 2015.

Requirements

There are some initial requirements for this little walkthrough.  First you need to have Visual Studio 2015 installed.  I am using Enterprise but I believe this will work for other versions as well, it is really simple.

Second, and equally important, you need the Node Package Manager (NPM).  Why do you need NPM?  Mainly because that is how Angular 2 will be updated and distributed.  Think of NPM as a different version of Nuget.  The easiest way, and it is how I did it, to get NPM is to install NodeJS.  Just go to the NodeJS site and download the installer.  I took the stable version.

Time to Get Started

It is time to get started.  The first thing we will do is start up Visual Studio 2015.  We want to create a new project.  Since Angular 2 was created using TypeScript, and it is highly recommended that we use TypeScript over plain old JavaScript that will be our initial project.  So click on File, then New Project, scroll down to TypeScript and select HTML Application with TypeScript.  Since this is really a Hello World type project I named mine HelloTSNG2.

FileNewProject

 

House Keeping

InitialSolutionExplorerNow for some house keeping.  We will not need the app.css or app.ts files, so delete those.  One thing I noticed with most Angular 2 tutorials is everyone puts their stuff in an app folder.  So lets add a new folder called app and a new folder called styles.  I will not go too deep in the app folder, but I have seen some people add more folders under the app one to keep things organized.  Trust me though, for this little thing we will not need much.

Now we need to add some configuration type files.  We will need one for NPM, TypeScript, and Typings.

NPM Configuration File

To add the one for NPM right click your project, mouse over Add then click New Item.  In the menu that comes up scroll down to NPM Configuration File, we will keep the name package.json.

AddNPMConfigFile

TypeScript and Typings Files

These two files are both JSON Files.  You can find the JSON File the same way you found the NPM Configuarion File in the add new item context menu.  You just name one tsconfig.json and the other typings.json

Now we need to add some TypeScript files.  Don’t worry about the contents of the other files yet.  That will be addressed shortly.  We need to add two TypeScript files to the app folder; main.ts and app.component.ts.

Finally lets add a css file to our styles folder.  We will call it styles.css.

Our solution should look like the image below.

FinalSolutionExplorer

 

The Code

Remember when I said I am using the QuickStart, I was not kidding.  If you go to the bottom of the QuickStart page you will find a nifty little control.  This control will show us the source for each file.  We are going to cheat and copy those file sources into ours.  We will have to edit the index.html to point at our style sheet, and the package.json, but that is not a big deal.

Well it really is not cheating since that is what they want you to do.  You will see an icon near the source of each page that allows you to easily copy the contents.

TheFiles

 

We will copy the contents of a file, select everything in the corresponding file of our project and paste.  This way we get rid of what we initially had and use the QuickStart’s text.

After you have cheated, edit the index.html page’s style reference.  You just need to add styles/ in front of styles.css in the href.

Edit the package.json from “name”: “angular2-quickstart” to “name”: “HelloTSNG2”.

WorkingFinally we are going to save everything.  NPM will do some work so be patient.  You will see it in the bottom of Visual Studio and your output window.  It is a little animation that looks like two arrows.  Even when the output window seems like it is done, watch that icon, and other information at the bottom.

InstallingPackagesCompleteYou need to wait until it is complete.  Even though it is done, we are not, we have a couple more steps.

Almost There

We need to open a command prompt and CD our way to our project folder that contains the code.  For me it is something like C:\user\me\Documents\Visual Studio 2015\Projects\HelloTSNG2\HelloTSNG2

In that command prompt we want NPM to install things that are referenced in the package.json.  While I would think most of that was done when we saved it in Visual Studio, I found that is not always the case.  To make this happen just type npm install and hit enter.  You may get some warnings but that is fine.

Go back to Visual Studio.  Right click index.html and click View In Browser.  Your browser should come up.  It should briefly display the loading message from the index.html page and change to My First Angular 2 App from the app.component.ts.

Done!

Of course you could hit F5 or use the run button at the top, whichever is easier.  Finally we have done it.  We have the 5 Minute Quickstart running in Visual Studio 2015.  I highly recommend you read the QuickStart as it will explain the why and what of the code.

Remember, my main goal was not to teach the QuickStart, they did an awesome job of that.  My goal was to just get it working in Visual Studio 2015.

Advertisements

About SheldonS

Web developer for over 15 years mainly with Microsoft technologies from classic ASP to .NET 4. Husband, father, and aspiring amateur photographer.

Posted on April 16, 2016, in Angular, TypeScript, Visual Studio and tagged , , . Bookmark the permalink. 3 Comments.

  1. Thanks for putting this together it was a huge help. I needed to add systemjs.config.js to get it to work.

  2. Hi , thanks for your great tutorial, I did not find typing.json?

  3. Mo, Do you mean you could not find how to add a typing.json file or you did not see the source to paste into the file?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: