Getting Started With Angular 2 In Visual Studio 2015
Angular 2 And Visual Studio 2015?
I 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.
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
Now 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.
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.
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.
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”.
Finally 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.
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.
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.