Angular 2 development with Visual Studio

When I started to look over what Angular 2 is all about I tried to create a Visual Studio project for testing. I expected to be able to start using a project type such as HTML application with Typescript (or with JavaScript) and to be able to simply add an Angular 2 package to get it working. But it was not that easy at this time (there is no official Angular 2 NuGet package yet).

To get started easy enough, however, I followed and adapted the advice found in the Quick Start tutorial from Angular 2 page. This way I got it working in less than 5 minutes! (Node.js has been already installed on my machine as a third party tool with Visual Studio 2015, though.)

Try it yourself following these steps:

  1. Create an Agular2Test Visual Studio project of type HTML application with TypeScript:
    1.png
  2. Add package.json, tsconfig.json, typings.json, and systemjs.config.js files with the contents copy-pasted from the tutorial. Upon saving them, Visual Studio performs npm install command automatically for you but it may not succeed:
    2.png
  3. Open Node.js command prompt and use command cd [path]\Angular2Test to ensure it will run in the project folder, then run npm install manually; it will take some time and create a node_modules subfolder for you:
    npm
  4. Replace index.html with markup containing the starting point for your Angular 2 app, as indicated in the tutorial:
    3
  5. Remove the default app.ts and create an app folder under your project in Solution Explorer, including app.component.ts and main.ts, as indicated in the tutorial:
    4
  6. Add styles.css as well, to finish, and build and run your first Angular 2 app developed with Visual Studio!
Advertisements

About Sorin Dolha

My passion is software development, but I also like physics.
This entry was posted in Angular, JavaScript and tagged , , . Bookmark the permalink.

Add 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