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.
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.
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.
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!
Thanks for this! This is the easiest demo I’ve seen on getting Angular2 working in a vs.net project. It showed me a couple areas where I wasn’t doing it wrong.
Pingback: Tips of the week 2015-06-29 | Basho on the .NET
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!
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.
I updated the post with the working version and comments for RTM. Thank you.
Thanks! That takes care of error TS1219.
There is more to it, though: I get an error on System.import:
Object doesn’t support property or method ‘import’
Any hint?
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.
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!
Glad you figured it out, Graham.
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.
If you are using sample project, you need to make sure you have all .d.ts definition files for angular.
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!
I think I’ve finally figured this out. – The required settings depend on the project template that is being used. See @Rox answer on StackOverflow and look at my comments: http://stackoverflow.com/questions/31733922/vs2015-rtm-angular2-typescript-problems/31793080?noredirect=1#comment51588148_31793080
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
I updated the comment with more information that works with RTM. Still does not work?
Pingback: First Steps with ASP .NET MVC6 and Angular2 with TypeScript using Visual Studio 2015 (Part 1/3) | Empirical Thoughts
Pingback: AngularJS 2.0 | TechPress
Hi Sergey, I’m getting an error “TS2300: Build: Duplicate identifier ‘Promise’.” in the es6-promise.d.ts file. Did you get this error? Do you have any idea how to solve it? Thanks!
@darius
My guess is that TS compiler version is newer and the definition file does not obey by stricter rules. Hopefully if you get the latest version of it, it will just work
Thank you – this works for me if I use the same version as in your example. Cool.
However, if I change to latest angular version alpha.44 (which is used in angulars example). then I get a 404 error
Not Found: https://registry.jspm.io/main.js (WARNING: non-Error used)
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
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
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
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 ?
I use Chrome for debugging, but you can use VS. Just make sure you switch to IE when you run the app from VS. You should be able to use breakpoints, etc… then.
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.
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.
Somebody found a solution to the problem not being able to debug (main.ts) inside visual studio if using systemjs?
please help with the debug?
“The reason for developing in VS is to have an integrated development / debugging environment.” I totally agree with Jesper. We need to find a solution to debug in VS.
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,
You need to download core templates https://www.microsoft.com/net/core#windows
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?
Could you try one at a time?
You can download “Angular2 Template for Visual Studio 2015 with update 3″from here…
https://github.com/narottamgoyal/Vs2015Angular2Template.git
You can download “Angular2 Template for Visual Studio 2015 with update 3” from here…
https://github.com/narottamgoyal/Vs2015Angular2Template.git
angular 2 – type script beta ?
other sample Angular: http://mgcrudserver.azurewebsites.net/#/
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
Did you make sure to turn on compile on save option in tsconfig.json?