Launch Angular2 with Visual Studio 2015

Not so long ago, I was interested in the problem of migration of applications written with the first Angular.js to the second. By the way, this article should have been exactly that. But the case intervened. Before that, I raised Angular2 only on Node.js. And here, since I mostly work from under Visual Studio, I decided to run it from under it. When I came to myself after all the rake punches I had to go through, I decided to allocate the Angular2 deployment under Visual Studio 2015 in a separate article. And something tells me that it will not be superfluous.

Step one. Props.

First we need to prepare Visual Studio to work with Node.js and NPM, since almost all the packages that Angular2 depends on are in NPM.

We put NPM Task Runner and Package Installer . They will be useful to us for the interaction of the studio and npm.
')

After installing the extensions, run the studio and create an empty web project. Now we need to update the node.js and npm that are used by our Visual Studio. The studio uses not global npm and node.js, but local. It does not know anything about what is installed on your system and relies on the node.js that lies in the External Web Tools. If this is not known, then the studio will use outdated components and raise the application does not work. So, click on the project and choose quick install package. In the appeared window type gulp and put it. Of course, this is absolutely not necessary, but, frankly, I'm too lazy to create package.json manually.
After installing gulp, we get package.json, with which we can continue working.

And the first thing we need to do is check the version of node.js and npm that our studio will work with.

Add the scripts section to package.json with the “npm -v” and “node -v” commands and run them from under the task runner-a.


Personally, my results were impressive: node v0.10.31 and npm 1.4.9. Once again I draw attention to the fact that these are the versions that will be used by Visual Studio and neither the installed node nor the global npm have anything to do with them now.

Now, all this junk needs to be put in order. Add a new command to our package.json: “updateNpm”: “npm install npm @ latest” and run it. After waiting a bit, run getNpmVersion. Npm has been updated and now it is version 3.10.5.

However, with node.js, this approach will not work. To be honest, I did not find a way to update node.js, however, I found a way to get the studio to use the instance I need.

So, first, find out where you have node.js installed and copy the path there. Now we go to Tools -> Options -> Projects and Solutions -> External web tools and add a new path indicating the normal version of the node (if not, just download and install). Do not forget to take the new path to the very top. Reboot the studio (windows do not need to reboot) and execute the getNodeVersion command. Voila, version updated.

After all these dances with tambourines, I propose to go to drink coffee. Further, it will not be easy either.

Step two. Installing dependencies.

Continue to torment our project.json. Now let's fill it with all the dependencies of our application. Dependencies are taken from 5 MIN QUICKSTART , edited with windows in mind, and one small but very proud nuance.



Now, from under the task runner, run the install command and wait until all the packages are installed. If everything went well, we should have several other folders in the node_modules folder, among which should be the "@angular" folder. If you see it, then so far everything is going well and the dependencies are established And if not? Sometimes there may be problems with cachem npm. If the packages are not installed and the entire taskbar console is red for errors, try adding another command to package.json - “npm cache clean” and run it. Perhaps this will help.

Step three. Configure typescript for Visual Studio.

It was the turn to make a few more steps in our drum dance.
Let's add our first .ts file. Create an app folder in the root and add an empty app.component.ts file there. Do not show imagination and invent their names. Everything can break even from a sneeze. Now we close the studio.


Having closed the studio, we find our * .csproj file and add two new lines to the PropertyGroup node:

 <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators> <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 

Now open the project, go to the properties and see a new tab - TypeScript Build.
We expose EcmaScript 6 and Module System - Common Js there. We save.

Step Four. Code.

Now you can add the first lines of code to our app.component.ts
We copy there this and bildim project.


If everything went as it should, the build will fail without errors. This is our main component or, in other words, this is our application.

Now let's customize its launch (bootstrap). To do this, add the file to the app folder.


And again bildim project. Again there should be no mistakes. It is possible, of course, not to build, but somehow I am calmer.

Now add to the root of the project


and, also to the root,

Step five. Attempt to take off.

And now we are launching an astronaut! Well, we start the application.

If everything went well, you should see the My First Angular 2 App sign on your screen. The ready code is available on github here .

Download template here

Thank you all for your attention and a graceless future.