Angular 2 in Visual Studio 2015 with TypeScript

I have been following the developments occurring in Angular 2.0 world for a number of months.  Although the project is not even in alpha phase quite yet, I have been meaning to try to write a tiny sample project.  I wanted to see how version 2 is different from version 1, even in the simplest of concepts.  I did not want to make big demo, as I want to wait till at least beta.  So, in this post I will document the steps I took using Visual Studio 2015 and TypeScript to create tiny demo, that at a minimum using some data binding concepts for fields and functions.  So, here is my first Angular 2.0 demo.

I am using Visual Studio 2015.  I also need to install beta of TypeScript 1.5.

To start I simply created an empty web project.  Since this is a simple demo, I stayed away from web api and other data concepts.

image

Now, I just need to create a shell HTML page.  I added new index.html to the project.  In it, I just needed to import the latest versions of developer preview JavaScript libraries.

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
	<meta charset="utf-8" />
</head>
<body>
    <my-app></my-app>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</body>
</html>

You see two new libraries in addition to Angular 2.  First one, Traceur transpiler component, the in-browser version.  Second one systemjs, is a poly-fill that emulates module loader of ECMA 6 standard in ECMA 5 compatible browsers.  Since my demo will be transpiled to JS 5, I need this as well.  So, so far nothing special.

Now the goal of the sample project.  It will be a hell world type of application, taking user’s name and displaying hello message via a button click.

Now I need to pull in TypeScript definition file for Angular 2, angular2.d.ts.  To simplify this process, I am going to install TypeScript defintion manager, tsd.  In order to accomplish this, open up “Developer Command Prompt for VS2015.”  You will find the shortcut under Visual Studio 2015 menu in Windows.  Sine this prompt support node package manager.  To do so, just type the following to install tsd into global node location

npm install –g tsd 

Now, we need to pull main angular definition by typing the following at the same prompt.  However, before you do this, switch the directory to where your csproj file is located.  If you do not, you will need to manually copy .d.ts files around.  By default they are installed into typings folder.

tsd install angular2 es6-promise rx rx-lite

Besides Angular2, this installs its dependencies as well, total of 4 files will be installed.  Just include them in your project, and you are ready to write your first Angular 2 class.  Ad main.ts TypeScript file to your project.  You main get a prompt that says TypeScript needs to be configured for this project.  You also need to pull up property page for TypeScript and enable AMD modularity support.

image

 

Then add the following code to main.ts.

import {Component, View, bootstrap, formDirectives} from 'angular2/angular2';
@Component({
    selector: 'my-app'
})
@View({
    directives: [formDirectives],
    templateUrl:'mainForm.html'
})
class AppComponent {
    name: string;
    hello(): void {
        alert("hello, " + this.name);
    }
    constructor() {
        this.name = "John Doe";
    }
}
bootstrap(AppComponent);

This code is using annotations features of TypeScript 1.5, developed by Microsoft in coordination with Google.  My main class is called AppComponent.  It is decorated with two Angular 2 attributes.  First attribute specifies where my component will be injected – inside my-app tag.  If you scroll back up to the index.html, you will see this tag.  Second attribute specified the view definition for this class.  It says that I will require form directives for this view, and the view itself is located inside mainForm.html.

The class itself has one property and one method.  I am using those terms a bit loosely in relationship with JavaScript, but in TypeScript I tend to use class based nomenclature.  Now, try to compile your project to ensure it is properly configured.

In the next step we need to create the mainForm.html view.

<h1>My first Angular 2 App</h1>
<div>
    Name: <input [(ng-model)]="name" />
</div>
<button (click)="hello()">Click</button>

You will notice different syntax, as compared to Angular 1.  I am using new ng-model syntax that indicates two-way data binding for my name property of the class above.  I am using slightly different event syntax for my button, indicating that when it is clicked, I need to call hello function on the same class above.  In the final step I need to bootstrap my class inside index.html, below my other JavaScript includes.

<body>
    <my-app></my-app>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
    <script>System.import('main');</script>
</body>

You see System.import call.  The module name, i.e. file name in my case is main, since TypeScript file is call main.ts, hence JavaScript generated file is called main.js.  Extension is assumed by SystemJS JavaScript library.

This is it, you are ready to run the app and type your name and click the button.

image

Enjoy.  You can download the same app here.

Update

In VS 2015 RTM a few things changed.  You will get an error, so I am posting RTM solution here.  Specific changes you need to make are:

Make sure that you specify module system in the TypeScript properties window and use AMD.

Add the following property to the property section of your csproj file (in bold)

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
  </PropertyGroup>

Enjoy!

39 Comments

  1. Pingback: Tips of the week 2015-06-29 | Basho on the .NET

  2. Great demo!
    Have you tried creating the same example using VS2015 RTM? Specifically using the intrinsic TypeScript compiler instead of using traceur? I am unable to get this simple project to work using the latest VS2015 release version.

    I’m getting the following two errors when I build my solution:
    1. Cannot compile modules unless the ‘–module’ flag is provided.
    2. Experimental support for decorators is a feature that is subject to change in a future release. Specify ‘–experimentalDecorators’ to remove this warning.

    For #1, I tried adding the tsconfig.json but VS2015 complains that it’s an unrecognizable file type.
    For #2, I modified the csproj file directly to add the following two lines:
    True
    True

    I’ve run out of ideas. Any help would be greatly appreciated.
    Thanks!

  3. I too have tried creating this project from scratch using Visual Studio 2015 RTM and cannot get it to work, using the latest editions of everything mentioned in the article. It seems this demo was designed to work only with the beta and/or release candidate editions of Visual Studio 2015 and TypeScript 1.5 and does not work for the released edition of Visual Studio 2015 and TypeScript 1.5.

  4. Runtime error? Somehow you do not have system js loaded. If you are using systemjs, check to see if you set that as module system setting under TypeScript build properties of the project.

  5. My problem was that I added the property ‘TypeScriptExperimentalDecorators’ to the Release section of the csproj file!!! Ensure that you add this element to both Release AND Debug sections of the csproj file if you intend to run in both modes. Thanks!

  6. After creating tsconfig.json file and editing the .csproj file,
    I am getting these two build errors:
    Build: Cannot find module ‘angular2/angular2’.
    Cannot find module ‘angular2/angular2’.
    Any help would be appreciated.

  7. I have been able to get TypeScript/Angular2 apps to work in VS2015 RTM when I create a TypeScript HTML Application project.
    However, when I create a project using a different template, like ASP.NET Web Application (for MVC), I get the build errors as initially reported above, i.e. it complains about the ‘-module’ and the ‘experimentalDecorators’ flags not being present.

    Has anybody been able to retrofit TypeScript and Angular2 into an existing MVC project?
    Is there a setting in the MVC project that I’m missing (apart from the issues addressed above)? Do other VS2015 project templates support TypeScript?

    Thanks!

  8. Hi Graham (not sure if you get notification for page updates on this page),

    How did you get rid of –module flag error.

    I’m also run into cannot find module angular/angular2 error Siddharth above come across – any ideas?

    Thanks.
    Niv

  9. Pingback: First Steps with ASP .NET MVC6 and Angular2 with TypeScript using Visual Studio 2015 (Part 1/3) | Empirical Thoughts

  10. Pingback: AngularJS 2.0 | TechPress

  11. So, on Visual Studio 2015 (Community), and using a TypeScript project, I had to do the following to get rid of

    “TS1219 Experimental support for decorators is a feature that is subject to change in a future release. Specify ‘–experimentalDecorators’ to remove this warning.”

    1. Right click on the project name, and select ‘Unload Project’.
    2. Right click on the project name again, and select ‘Edit YourProjectName.csproj’
    3. Navigate to:

    and insert the line:

    true

    4. Navigate to:

    and insert the line:

    true

    5. Right click on the project name, and select ‘Reload Project’

    If you don’t follow steps 4 and 5, and your ‘Solution Configurations’ drop-down box, situated under ‘Team’ on the menu bar, is set to either ‘Debug’ and ‘Release’, the corresponding section, which does not contain the tag, will cause the TS1219 error to be thrown

  12. So, on Visual Studio 2015 (Community), and using a TypeScript project, I had to do the following to get rid of

    “TS1219 Experimental support for decorators is a feature that is subject to change in a future release. Specify ‘–experimentalDecorators’ to remove this warning.”

    1. Right click on the project name, and select ‘Unload Project’.
    2. Right click on the project name again, and select ‘Edit YourProjectName.csproj’
    3. Navigate to:

    and insert the line:

    ‘true’

    4. Navigate to:

    and insert the line:

    ‘true’

    5. Right click on the project name, and select ‘Reload Project’

    If you don’t follow steps 4 and 5, and your ‘Solution Configurations’ drop-down box, situated under ‘Team’ on the menu bar, is set to either ‘Debug’ and ‘Release’, the corresponding section, which does not contain the tag, will cause the TS1219 error to be thrown

  13. So, on Visual Studio 2015 (Community), and using a TypeScript project, I had to do the following to get rid of

    “TS1219 Experimental support for decorators is a feature that is subject to change in a future release. Specify ‘–experimentalDecorators’ to remove this warning.”

    1. Right click on the project name, and select ‘Unload Project’.
    2. Right click on the project name again, and select ‘Edit YourProjectName.csproj’
    3. Navigate to:

    ” PropertyGroup Condition=”‘$(Configuration)’ == ‘Debug'” ”

    and insert the “TypeScriptExperimentalDecorators” tag, and set it to true

    4. Navigate to:

    “PropertyGroup Condition=”‘$(Configuration)’ == ‘Release'” ”

    and insert the “TypeScriptExperimentalDecorators” tag, and set it to true

    5. Right click on the project name, and select ‘Reload Project’

    If you don’t follow steps 4 and 5, and your ‘Solution Configurations’ drop-down box, situated under ‘Team’ on the menu bar, is set to either ‘Debug’ and ‘Release’, the corresponding “PropertyGroup Condition” section, which does not contain the “TypeScriptExperimentalDecorators” tag, will cause the TS1219 error to be thrown

  14. Another problem. This lets your write / compile / run the code from VS. But it seems like you cannot debug in VS since the js files are loaded dynamically.
    Any suggestions on how to get this working with VS debugger ?

  15. I am not able to debug with VS. The reason is the js files are loaded dynamically through ‘import’ and therefore not available in vs debugger. I too can use Chrome or IE debugger, but VS debugger is not working. The reason for developing in VS is to have an integrated development / debugging environment.

    I have not yet been able to find a solution for this online.

  16. I’m using Angular 2 with an ASP.NET 5 WebApi 2 project and I found the solution to the duplicate property identifiers was to download and install Visual Studio 2015 Web Essentials and right click on the property with the red squiggly bit under it. This is quite a late post so it may have been fixed by now ). I’m having a problem importing FormDirectives myself, I’m quite new to Transcript and Angular.

  17. I am using VIsual Studio2015 Enterprise edition with update2. I do not see the asp.net 5 project templates that you are showing in your demo.
    Can you let me know what kind of VS2015 installation you are using and also if you had to install any tools/updates.
    Thanks,

  18. I’m trying to follow your tutorial but I’m getting stuck at:

    tsd install angular2 es6-promise rx rx-lite

    I get the message:

    (node:8180) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

    It installs the es6-promise and rx modules but not angular2 or rx-lite.

    Thoughts?

  19. My problem is that i cannot get visual studio to compile *.ts files. i tried looking for a solution online, but with no luck. Visual studio is not recognizing the import syntax used in *.ts files.

    Any help would be really appreciated.
    Thank you

Leave a Reply to Mark Cancel reply

Your email address will not be published. Required fields are marked *