Angular2: 5min quickstart project setup with Visual Studio 2015

This post is a beginner level post for all those users who does their development mainly for enterprise applications and loves to code in Visual Studio and wants to do Angular2 development using Visual Studio Currently Visual Studio doesn’t have any Angular2 template out of the box. So we will be using a HTML Application Template with Typescript.

There are many nice lite editors (Sublime/Visual Studio Code/Atom/Bracket) available in market for doing all front-end development and you can install additional plugins to ease your development and help in quick coding. Coding editor preference is more of your comfort level and ease of use with the features, which editors provides by default/or with add on plugins.

Microsoft has started releasing their Visual Studio enterprise editor as a community editor with some limited features for last few years, for details you can visit Microsoft website. To download the free community edition, you have to register it with your live/hotmail email account. (That’s what I had to do).

Editors like Web Storm, or Visual Studio  are great editor for creating and managing enterprise apps compared to lighter JavaScript/HTML5 editors cited above, because of additional enterprise management tool these editors provide out of the box for your day to day development.

Angular2 is a framework/platform to create enterprise application not a simple website with 4-5 pages, because if you want to do that you will be better off avoiding it, as carrying over so much payload for that small work is not recommended for a good programmers

Create a new Angular Project: We will be using angular.io 5 min quick start sample project to show how to setup Angular2 project in it. You can download the whole project from github. To start creating Angular2 project in Visual studio we will use a HTML Application with Typescript template: typescript-template as it doesn’t have default template to setup Angular2 project yet.

Next go to 5 min quick start sample project page and start following the steps listed in the tutorial. Create tsconfig.json, typings.json & package.json file at root of project and copy paste the code from the page and copy paste the code from the page.

Install modules automatically: As soon as you will save the package.json file Visual studio will start downloading all the node modules into node_modules folder. package_jsonYou can varify that from output tab in visual studio or you can visit the file explorer and see the files and folders there.

Add all ts files, html files and css files as instructed. You can remove app.ts & app.css from folder as that’s not part of this quick start sample. If you don’t see anything listed in Task Runner explorer task_explorertab click refresh icon (marked in orange rectangle image above) in that it will automatically update the Task runner explorer tab with all available npm commands from package.json file. You can right click – install and click Run to make sure all the npm modules and typings files are installed for the project.

Run project from editor: Double click start or right click start and then click Run command from it. It will launch the angular2 sample app in default associated browser.start_project_from_vs

It will be linked with BrowserSync so any update you will make in app.component.ts file will automatically refresh the browser and you can view all the task runner in Task Runner explorer at the same time.

Real-time error listing: You can view the errors in error list tab as soon as you will make any kind of error in your ts/css/html file and that too without you saving the file.error_list

By clicking on a variable definition with ctrl+click when it turned into hyperlink it will display the definition of that variable there itself for quick help with file name appearing in window as where that definition is coming fromvariable_definition.

Hide files not needed in development: One other quick feature which I liked is when I create a project with Typscript template it doesn’t show me Javascript files or other node_modules folder automatically, you don’t have to do anything extra.

hide_files

files/folders listed in brown rectangle will show/hide if you click on icon highlighted with orange rectangle at top of above image.

There are many other additional features which Visual Studio editor provides out of the box like checking code coverage and other great features which helps you in validating your code or it’s efficiency which are beyond the scope of this article, but they are definitely nice features to help in small or big projects.

You can download the whole project from github.